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内 容 简介 
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S PREFACE 前 至 


Axure RP 是 原型 设计 软件 ， 其 功能 非常 强大 ， 应 用 范围 也 非常 广泛 ， 使 用 Axure RP 可 以 创建 
应 用 软件 或 Web 网 站 的 线 框图 、 流 程 图 、 原 型 和 Word 说 明文 档 。 作 为 专业 的 原型 设计 工具 ， 它 能 
快速 、 高 效 地 创建 原型 ， 同 时 支持 多 人 协作 设计 和 版 本 控制 管理 ， 能 够 更 好 地 表达 交互 设计 师 所 想 的 
效果 ， 也 能 够 很 好 地 将 这 种 效果 展现 给 研发 人 员 ， 使 团队 合作 更 加 完美 、 高 效 。 


本 书 内 容 


本 书 内 容 通俗 易 懂 ， 简 明 扼 要 ， 从 产品 原型 设计 的 基础 开始 ， 详 细 讲 解 了 使 用 Axure RP 8.0 的 
方法 和 技巧 。 本 书 中 通过 使 用 实例 讲解 知识 点 ， 使 得 学 习 过 程 不 再 枯燥 乏味 ， 其 内 容 章 节 安排 如 下 。 

98199 初 识 Axure RP， 本 章 主 要 介绍 Axure RP 的 特殊 功能 、 新 增 功能 、 与 其 他 原型 工具 
的 比较 、 原 型 设计 流程 的 不 同 模型 、 原 型 设计 的 交互 式 原 理 、Axure RP 的 实践 应 用 、Axure RP 中 
专业 术语 的 区 分 ， 以 及 大 项 目 中 的 Axure RP 技巧 等 。 

第 2 章 Axure RP 的 工作 环境 ， 本 章 主要 介绍 Axure RP 8.0 的 工作 界面 ， 详 细 讲 解 各 种 工具 
和 面板 的 使 用 ， 以 及 如 何 保存 文件 。 

第 3 章 掌握 Axure RP 的 使 用 技巧 ， 本 章 主要 介绍 Axure RP 的 使 用 技巧 和 设计 原则 。 首 先 
介绍 一 些 Axure RP 操作 小 技巧 ， 例 如 流程 图 表 、 元 件 和 变量 的 使 用 等 。 另 外 ， 还 讲解 了 背景 覆盖 法 、 
从 Photoshop 到 Axure RP 和 在 Axure 中 使 用 Flash 的 方法 。 

第 4 章 ， 交互 事 件 ， 本 章 主要 介绍 Axure RP 的 交互 事件 ， 交 互 事件 不 仅 可 以 应 用 到 页 面 上 还 
可 以 应 用 到 不 同 的 元 件 上 ， 不 同 的 元 件 有 着 不 同 的 交互 事件 。 

第 5 章 元 件 库 、 母 版 的 使 用 及 动态 面板 的 创建 ， 本 章 主要 介绍 新 增 的 页 面 快 照 的 使 用 方法 及 
Axure RP 中 的 第 三 方 元 件 库 ， 并 自 定 义 元 件 库 ， 熟 练 掌握 母 版 、 动 态 面板 和 元 件 面板 的 使 用 ， 在 设 
计 中 使 用 可 以 提高 工作 效率 。 

第 6 章 项 目 输 出 ， 本 章 主要 介绍 项 目 文件 输出 时 及 项 目 完 成 后 的 首要 任务 ， 讲 解 了 Axure RP 
的 4 种 生成 器 ， 即 HTML 生成 器 、Word 生成 器 、CSYV 报告 生成 器 和 打印 生成 器 。 

第 7 章 团队 合作 项 目 ， 本 章 主要 介绍 团队 合作 项 目的 制作 ， 首 先 讲解 团队 合作 项 目 原型 存储 的 
公共 位 置 ， 其 次 详细 讲解 团队 项 目的 制作 、 获 取 及 发 布 到 Axure Share 中 。 团 队 合作 项 目 需要 团队 
成 员 的 齐心 协力 ， 共 同 完 成 项 目的 绘制 。 

第 8 章 综合 实例 ， 本 章 主要 运用 Axure RP 绘制 大 型 的 原型 设计 实例 ， 通 过 完成 实例 的 绘制 
可 以 巩固 Axure RP 的 学 习 和 检测 ， 更 多 地 了 解 Axure RP 软件 。 


本 书 特 点 


本 书 内 容 丰 富 、 条 理 清晰 ， 通 过 8 章 的 内 容 ， 为 读者 全 面 、 系 统 地 介绍 了 原型 设计 的 知识 以 及 使 
用 Axure RP 8.0 进行 原型 制作 的 方法 和 技巧 ， 采 用 理论 知识 和 实例 操作 相 结合 的 方法 ， 使 知识 融会 
贯通 。 
。 ”语言 通俗 易 懂 ， 实 例 精美 ， 图 文 同步 ， 涉 及 大 量 原型 设计 和 制作 的 知识 讲解 ， 帮 助 读者 深入 
了 解 原型 设计 。 
。 实例 涉及 面 广 ， 几 乎 涵盖 了 原型 设计 和 制作 中 大 部 分 的 效果 ， 每 种 效果 通过 实际 操作 和 实例 
制作 帮助 读者 掌握 原型 设计 中 的 知识 点 。 
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。 ”注重 原型 设计 制作 软件 知识 点 和 操作 技巧 的 归纳 总 结 ， 在 基础 知识 和 实例 讲解 过 程 中 穿插 了 
软件 操作 和 知识 点 提示 等 ， 使 读者 更 好 地 对 相关 知识 进行 学 习 和 吸收 。 
。 ”每 一 个 实例 的 制作 过 程 都 配 有 相关 素材 和 视频 教程 ， 步 骤 详 细 ， 使 读者 轻松 掌握 。 


本 书 作者 


本 书 由 杨阳 编著 ， 另 外 李 晓 斌 、 张 晓 景 、 解 晓 丽 、 孙 慧 、 程 雪 翩 、 刘 明秀 、 陈 燕 、 胡 丹 丹 、 远 玉 
I. AE, DA, RAR, EA, SEE PER ARE, KAA, AA, iE KA EER, 
林学 远 、 黄 尚 智 、 陶 玛丽 、 王 大 远 、 尚 丹 丹 、 刘 明明 、 张 航 、 张 伟 等 也 参与 了 本 书 的 部 分 编写 工作 。 
本 书 在 编写 过 程 中 力求 严谨 ， 但 难免 有 下 漏 和 不 足 之 处 ， 希 望 广 大 读者 批评 指正 。 

本 书 配套 的 PPT 课件 请 到 http://www.tupwk.com.cn Fs. 
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v^ 安装 和 启动 Axure RP 


原型 设计 ， 又 常 被 称 为 线 框图 、 原 型 图 和 Demo， 其 主要 MA 

用 途 是 在 正式 进行 设计 和 开发 之 前 ， 通 过 一 个 至 真 的 效果 图 来 v Axure RP 的 新 增 功能 

模拟 最 终 的 视觉 效果 和 交互 效果 。 v Axure RP 与 其 他 原型 工具 的 
本 章 将 向 用 户 介绍 原型 设计 软件 Axure RP， 了 解 利用 这 比较 

个 神奇 的 软件 是 如 何 制作 产品 原型 的 ， 如 何 将 设计 师 的 想法 转 ”原型 设计 流程 的 不 同 模型 

化 成 可 以 向 用 户 展示 的 逼真 原型 。 w^ 原型 设计 的 交互 式 原理 

w^ Axure RP 的 实践 应 用 











困 装 时 刻 


ew Arrival 





Axure RP 是 一 个 专业 的 快速 原型 设计 工具 。Axure(Ack-sure) 代表 美国 Axure 公司 ; RP 














则 是 Rapid Prototyping( 快速 原型 ) 的 缩写 , 最 新 版 本 为 Axure RP 8.0, 其 软件 启动 界面 如 图 1-1 
所 示 。 


























图 1-1 

Axure RP 的 第 一 个 版 本 在 2003 年 诞生 。 它 是 第 一 个 专门 被 用 来 设计 与 制作 基于 浏览 器 三 维 网 

站 原型 的 软件 。9 年 后 ，Axure RP 被 公认 为 是 网 页 原型 工具 中 的 标准 ， 并 且 被 全 世界 众多 的 用 户 体 
验 专家 、 商 业 分 析 人 员 和 产品 经 理 使 用 着 。 
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在 开始 安装 之 前 ， 要 执行 一 些 相关 的 步骤 ， 以 减少 安装 过 程 中 遇 到 问题 的 可 能 性 ， 例 如 确定 运行 
Axure RP 8.0 的 计算 机 硬件 要 求 , 了 解 Axure RP 8.0 版 本 与 运行 的 操作 系统 等 具体 系统 要 求 如 下 。 

操作 系统 : Windows 7/ Windows 8. 

内 存 : 1GB. 

CPU: 1GHz。 

硬盘 空间 : 60MB。 

产品 的 规格 说 明 需 要 Office 版 本 : Microsoft Office Word 2000/2003/2010。 














SEAB] Axure RP 8.0 的 安装 和 启动 
SEDI 1^ auem 视频 \ 第 1 章 \Axure RP 8.0 的 安装 和 启动 mp4 — 源 文件 , 无 











实例 分 析 : CU 
该 实例 通过 安装 和 启动 软件 ， 了 Tm 

解 软 件 的 基本 性 能 ， 熟 悉 软 件 的 工作 PP os 

界面 。 

制作 步骤 : 


将 下 载 好 的 Axure RP 安装 包 解压 ， 如 图 1-2 所 示 。 解 压 完成 后 ， 双 击 打开 Axure_RP_ 
Pro 文件 夹 ， 如 图 1-3 所 示 。 

















1-2 1-3 


第 1 章 WIR Axure RP 


{E Axure. RP. Pro 文件 夹 中 双击 AxureRP-Setup-Beta 选项 ， 如 图 1-4 所 示 。 弹 出 安 
装 Axure RP 软件 界面 ， 在 界面 上 单 击 Next ( 下 一 步 ) 按钮 ， 完 成 下 一 步 的 安装 ， 如 图 1-5 所 示 。 





























AurePietupiea eem isa a — 0/1 A 
[ro vi nave 


1-4 





li Axure RP 8.0 Beta -InstallAware Wizard lelelss 





iB 





Welcome to Axure RP 8.0 Beta 
Setup Wizard 


To complete this installation, Windows might require restarting 
after you finish this wizard. 


To continue, click Next. 

















图 1-5 


f£ License Agreement( 许可 协议 ) FOX | Agree ( 我 同意 ) ， 单 击 Next ( 下 一 步 ) 按钮 ， 
继续 进行 安装 , 如 图 1-6 所 示 。 选 择 软件 的 安装 位 置 , 单 击 Next( 下 一 步 ) 按钮 进行 安装 , 如 图 1-7 所 示 。 





Mil hxure RP ao Beta - Inetalaware Wizard = 


ÑE xure RP 8.0 Beta - InstallAware Wizard le 





= 
[| E License Agreement 


Pioaso read tho following eoneo agreament. To sortinu with olus, 
you must accepi the ageenent. 


但 AXURE RP LICENSE AGREEMENT. 3 
[ 
This Axure RP License Agreement is made. 


Affliates. Tbe term "Party" shall refer to 
Aure and to Customer and it Permitted Affliates. 
Accevtance of this Agreement by the sanies shall 7 


IndaliFolder 
Required Disk Space: 
Remaring Disk Space: 


= 
T] Soloct Destination 


Sotup vill instal fileo irto tho folder dnplayod bbw. 


Dr Wdebo tamure irae Anur AP O0 Bsta ET 





Esc [Ee] i] 




















sex [e ] (Com) 























图 1-6 


继续 单 击 Next( 下 一 步 ) 按钮 进行 安装 ， 


行 安装 ， 如 图 1-9 所 示 。 





= 
IE Program Shortcute 





Sob wil eroale chin ho Sta Manufar Auo RP BO Rota: Paro choore a 
name for the program group in which the shortcuts will be cealed 

Bogan Grum 
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Create shotculs for: 


AlUsers 
© Curent User Oniy 
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如 图 1-8 所 示 。 继 续 单 击 Next ( 下 一 步 ) 按钮 进 


Completing the Axurc RP 8.0 Beta 
Sctup Wizard 


Thewizsid hae gathered al necessam iríomalion. 
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进入 安装 程序 开始 进行 安装 ， 如 图 1-10 所 示 。 完 成 软件 的 安装 ， 如 图 1-11 所 示 。 


EJ - z 
Updating Your System Completing the Axure RP 8.0 Beta 
Setup Wizard 





Please wait while setup inspects your curent 
Pr 
You have successfuly completed the Are RP 810 Bela Setup 


Installing files and settings 





IV] Bun Axure RP 8.0 


[og en [coe 





图 1-10 图 1-11 
在 “开始 ”菜单 下 可 以 看 到 Axure RP 8.0 的 启动 图 标 ， 如 图 1-12 所 示 。 单 击 该 选项 即 可 
启动 Axure RP 8.0， 启 动 界面 如 图 1-13 所 示 。 


m Adobe Dreamweaver CC 2015 


= 
iB Axure RP 8.0 Beta 


[Wl Microsoft Word 2010 


Microsoft PowerPoint 2010 





回 可 可 


Ouma TR 





m Adobe Photoshop CC 2014 - b R 
[n 








图 1-12 1-13 


用 户 可 以 在 软件 界面 中 完成 原型 的 设计 与 制作 。 执 行 “文件 > 退出 ”命令 ， 即 可 退出 Axure RP 
8.0 的 工作 界面 。 


原型 设计 概括 来 说 是 整个 产品 在 上 市 之 前 的 一 个 框架 设计 。 以 网 站 注册 作为 例子 , 完成 前 期 交互 
设计 流程 图 的 设计 之 后 , 就 是 原型 开发 的 设计 阶段 , 简单 来 说 就 是 将 页 面 的 模块 、 元 素 、 人 机 交互 的 
形式 ， 利 用 线 框 描述 的 方法 ， 更 具体 生动 地 表达 出 来 ， 如 图 1-14 所 示 。 
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图 1-14 
Axure RP 是 一 个 专业 的 快速 原型 设计 工具 ， 让 负责 定义 需求 、 规 格 、 设 计 功 能 和 界面 的 专家 能 
够 快速 创建 应 用 软件 或 Web 网 站 的 线 框图 、 流 程 图 、 原 型 和 Word 说 明文 档 。 作 为 专业 的 原型 设计 
工具 ， 它 能 快速 、 高 效 地 创建 原型 ， 同 时 支持 多 人 协作 设计 和 版 本 控制 管理 ， 如 图 1-15 所 示 。 
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用 户 在 使 用 Axure RP 之 前 要 将 线 框图 、 原 型 和 视觉 稿 区 分 清楚 ， 这 对 接 下 来 的 学 习 很 有 帮助 。 


1.4.1 EE 


线 框图 是 低 保 真 的 设计 图 ， 通 常 以 黑白 线条 来 表达 ， 并 配 以 说 明文 字 ， 其 内 容 包括 内 容 大 纲 ( 什 
么 东西 )、 信 息 结 构 ( 在 哪儿 )、 用 户 的 交互 行为 描述 ( 怎么 操作 )。 


se 
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除了 使 用 笔 和 纸 绘制 线 框图 外 ， 使 用 Axure RP 也 可 以 绘制 线 框图 ， 其 绘制 线 框图 的 最 大 优点 
是 “ 快 ”， 绘 制 时 不 必 在 意 细节 ， 但 必须 表达 出 设计 思想 ， 不 要 漏 掉 重要 部 分 。 视 觉 上 的 审美 效果 应 
该 尽量 简化 ， 黑 白灰 是 经 典 用 色 ， 也 可 以 使 用 蓝 色 代表 超 链接 ， 如 图 1-16 所 示 。 
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图 1-16 


好 的 线 框图 应 该 能 够 清晰 、 明 确 地 表达 出 设计 师 的 设计 创意 ， 在 团队 成 员 中 准确 传 
达 设 计 思想 。 在 复杂 项 目的 初始 阶段 线 框图 是 必 不 可 少 的 , 发 挥 着 极其 重要 的 作用 。 


1.4.2 原型 


原型 是 中 ( 低 ) 保 真 的 产品 设计 图 , 代表 最 终 的 产品 。 原 型 ( 指 互联 网 产品 原型 ) 的 作用 非常 关键 ， 
也 非常 丰富 ， 有 以 下 4 种 。 

e 高效 、 准 确 地 展示 产品 需求 。 

e ”快速 更 新 和 迁 代 。 

® ”有 效 地 测试 不 同 的 假设 和 想法 。 

e ”将 用 户 的 需求 可 视 化 。 

原型 的 设计 应 该 尽 可 能 与 最 终 产 品 一 致 , 在 进入 正式 产品 开发 阶段 之 前 , 将 产品 原型 发 送 给 股东 、 
用 户 等 进行 测试 ， 并 根据 他 们 的 反馈 意见 进行 调整 ， 在 原型 中 做 这 些 工作 要 远 远 强 过 开发 出 应 用 程序 
之 后 再 做 , 如 图 1-17 所 示 。 


1.4.3 ”视觉 设计 稿 


视觉 设计 稿 是 高 保 真 原型 的 静态 设计 图 。 将 视觉 设计 稿 制作 成 可 交互 的 原型 就 是 高 保 真 原型 了 。 
通常 来 说 ， 视 觉 设计 稿 就 是 视觉 设计 的 草稿 或 终 稿 ， 帮 助 团队 成 员 以 视觉 审美 的 角度 审视 产品 。 用 优 
秀 的 视觉 设计 稿 制作 高 保 真 原型 可 以 起 到 意 想不到 的 作用 , 无 论 是 拿 去 见 投资 人 ,还 是 收集 用 户 反 馈 ， 
都 是 最 佳 选择 ， 如 图 1-18 所 示 。 
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实例 分 析 : 

在 Axure RP 中 新 建 项 目 文件 的 
方法 有 很 多 。 本 实例 是 通过 执行 新 建 
命令 进行 操作 的 ，Axure RP 还 有 很 
多 新 建 项 目 文件 的 方法 ， 详 细 内 容 将 
在 后 面 的 章节 中 向 用 户 讲解 。 
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制作 步骤 : 


双击 Axure RP 8.0 启动 图 标 ， 打 开 软 件 ， 如 图 1-19 所 示 。 执行 “文件 > 新 建 ” 命 令 ， 新 


建 项 目 文档 ， 如 图 1-20 所 示 。 
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Axure RP 8.0 有 四 大 特色 功能 一 一 产品 概念 图 及 设计 、 互 动 、 文 档 和 合作 。 








1.5.1 产品 概念 图 及 设计 


产品 概念 图 就 是 设计 师 使 用 元 件 及 钢笔 工具 将 项 目 粗略 地 绘制 在 页 面 编辑 区 中 ， 展 现 出 原型 。 

1. 既 可 粗略 设计 又 可 精细 设计 的 工具 

在 Axure RP 中 ， 只 使 用 矩形 、 占 位 符 、 形 状 和 文本 元 件 ， 就 可 以 飞快 地 制作 出 漂亮 的 线 框图 。 
将 原型 中 需要 的 元 素 都 准备 好 ， 再 进行 精细 的 视觉 美化 ， 加 上 颜色 、 渐 变色 、 半 透明 填充 、 导 入 图 片 、 
使 用 网 格 和 参考 线 进 行 精确 定位 ， 或 者 在 其 他 工具 ( 例如 Photoshop. Illustrator 等 ) 的 帮助 下 使 项 
目 达到 用 户 需 要 的 合理 的 真实 程度 。 

如 图 1-22 所 示 ， 第 一 张 是 比较 粗略 的 线 框图 ， 第 二 张 是 视觉 美化 之 后 的 高 保 真 原型 图 ， 它 们 都 
是 原型 ， 只 是 真实 程度 不 同 。 


淘宝 网 
Taobao com 





图 1-22 

2. 可 切换 到 手绘 图 的 效果 

在 项 目的 制作 阶段 ， 可 以 随时 通过 调整 精细 程度 将 原型 图 修改 为 灰 度 的 手绘 效果 。 用 户 可 能 会 因 
为 这 种 原生 态 的 感觉 而 喜欢 上 它 。 通 过 这 种 方式 ， 设 计 师 可 以 免 去 用 户 不 必要 的 期 待 ， 让 他 们 专注 于 
功能 、 内 容 和 互动 。 

在 Axure RP 中 新 建 一 个 项 目 ， 拖 奥 一 个 矩形 元 件 到 页 面 编 辑 区 中 ( 用 户 可 能 还 不 太 熟 悉 这 个 流 
程 ， 后 面 会 详细 介绍 )，Axure RP 会 自动 将 矩形 的 边框 变 得 不 规则 ， 从 而 展现 一 种 手绘 的 效果 ， 如 
1-23 所 示 。 


图 1-23 
3. 简单 易 操作 


从 一 开始 ，Axure RP 经 典 的 原型 工作 环境 非常 类 似 用 户 熟 悉 的 Windows 界面 和 Office 界面 ， 
行内 文本 编辑 和 超过 50 种 的 键盘 快捷 键 就 能 够 让 用 户 高 效 工 作 ， 如 图 1-24 所 示 。 当 用 户 开始 熟悉 


° Q 
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选择 模式 、 元 件 面板 和 检视 面板 等 功能 后 ， 其 工作 效率 将 与 日 俱 增 。 











图 1-24 


4. 使 用 母 版 以 做 到 “一 处 修改 ， 处 处 更 新 ” 

使 用 母 版 制作 一 些 需 要 重复 使 用 的 部 分 ， 例 如 网 站 的 头 部 、 尾 部 或 者 其 他 母 版 。 一 旦 母 版 被 
更 新 了 ， 所 有 使 用 此 母 版 的 页 面 就 会 自动 更 新 。 用 户 在 设计 时 可 以 尽 自己 所 需 ， 在 页 面 中 多 使 用 
母 版 。 

5. 元 件 可 以 让 用 户 迅 速 地 掌握 Axure RP 

Axure RP 支持 载 入 第 三 方 元 件 库 ， 用 户 可 以 下 载 其 他 用 户 发 布 的 免费 元 件 ， 也 可 以 加 入 自己 的 
图 标 、 商 标 、 品 牌 元 素 或 者 设计 模式 ， 创 建 属于 自己 的 独一无二 的 元 件 。 

Axure RP 提供 了 大 量 的 元 件 ， 如 图 1-25 所 示 。 元 件 就 像 是 PowerPoint 模板 一 样 ， 使 用 方法 
相似 。 
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使 用 元 件 绘制 找 回 密码 界面 
1 章 \ 使 用 元 


实例 3 
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制作 步骤 : 


执行 “文件 > 新 建 ” 命令 , 新 建 项 目 文档 , 如 图 1-26 所 示 。 将 “ 占 位 符 ” 元 件 拖 外 到 编辑 区 内 ， 




















1-26 图 1-27 
继续 将 “和 矩形 1 ”元件 拖 昌 到 编辑 区 中 ， 将 矩形 转换 为 椭圆 形 ， 如 图 1-28 所 示 。 调 整 椭圆 
形 的 位 置 和 大 小 ， 并 输入 文字 “1”， 如 图 1-29 所 示 。 
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选中 椭圆 形 元 件 ， 在 检视 面板 中 椭圆 形 面 板 的 “样式 ”标签 下 设置 “填充 颜色 ”为 
#FF6633， 如 图 1-30 所 示 。“ 边 框 颜色 ”为 #666666， 如 图 1-31 所 示 。 








TUR. [100 TREE [100 ] 


LEM E US Ras "E, " MRE 
图 1-30 图 1-31 
效果 如 图 1-32 所 示 。 使 用 相同 的 方法 绘制 其 他 形状 ， 如 图 1-33 所 示 。 
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1-32 图 1-33 


将 “文本 标签 " oH SUASRDXUJ , 在 圆 形 下 分 别 编辑 文字 , 如 图 1-34 所 示 。 使 用 “连接 器 ” 
工具 将 圆 形 连接 ， 如 图 1-35 所 示 。 
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图 1-34 1-35 


将 “矩形 1” 元 件 拖 昕 到 编辑 区 内 ， 调 整 元 件 的 位 置 ， 设 置 “填充 颜色 ”为 #66CCFF，“ 不 
透明 ”为 5，“ 边 框 颜色 ”为 无 ， 如 图 1-36 所 示 ， 效 果 如 图 1-37 所 示 。 

将 “文本 标签 ”元 件 拖 遇 到 编辑 区 内 ， 编 辑 文字 ， 如 图 1-38 所 示 。 将 “文本 框 ”元 件 拖 钨 
到 编辑 区 内 ， 编 辑 文字 ， 如 图 1-39 所 示 。 

使 用 相同 的 方法 绘制 找 回 密码 页 面 的 其 他 内 容 ， 最 终 效果 如 图 1-40 所 示 。 
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1.5.2 原型 的 交互 动态 


Axure RP 创建 的 元 件 可 以 具有 网 页 、JavaScript 和 Ajax 的 交互 动态 功能 ， 用 户 了 解 编程 知识 
也 很 重要 ， 以 便 可 以 快速 掌握 Axure RP 中 的 技术 应 用 。 

1. 不 只 是 点 击 这 么 简单 

用 户 可 以 非常 容易 地 创建 简单 的 点 击 网 页 ， 也 可 以 使 用 条 件 逻 辑 、 动 态 内容 、 动 画 、 拖 放 和 计算 
来 创建 高 级 功能 和 丰富 的 页 面 原型 ， 并 不 一 定 要 创建 高 保 真 的 原型 ， 但 是 如 果 需 要 ， 可 以 很 容易 地 让 
自己 的 设计 上 升 到 新 的 高 度 ， 能 够 更 加 方便 评估 ， 及 时 获得 用 户 反馈 以 及 用 户 测试 。 

使 用 Axure RP 可 以 轻松 地 创建 网 页 上 常见 的 几乎 所 有 基于 CSS、JavaScript 和 Ajax 的 交互 
动态 功能 。 
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2. 不 需要 编程 知识 ， 所 见 即 所 得 
选择 一 个 事件 ， 例 如 页 面 载 入 时 、 窗 口 滚动 时 或 页 面 按键 松 开 时 ， | — me | o em 
如 图 1-41 所 示 。 选择 一 个 事件 并 且 选 择 动作 ， 例 如 打开 链接 或 设置 元 xs 
件 值 。 最 后 为 动作 设 定 选 择 参数 ， 这 样 就 完成 了 。 T mp 
在 Axure RP 中 ， 完 全 不 懂 代码 的 人 经 过 学 习 也 可 以 完成 简单 的 网 Y cese 
页 互动 功能 ， 而 这 些 功 能 原本 是 需要 对 CSS、HTML 和 JavaScript 3 
练 掌握 的 工程 师 才 可 以 做 到 的 。 
建议 互联 网 的 从 业者 多 少 都 要 懂 一 些 代码 ， 但 是 Axure RP 的 便捷 eT 
性 能 够 极 大 地 简化 用 户 的 工作 ， 不 需要 花费 太 多 的 时 间 和 精力 ， 就 可 以 。 rmn 





窗口 向 上 滚动 时 





更 加 方便 地 制作 网 页 。 I mmessen va 
3. 快速 HTML 代码 E 


执行 “发 布 > ÆR HTML" $S, Axure RP 会 立刻 将 用 户 的 设 m 
计生 成 基于 HTML 代码 和 JavaScript 代码 的 原型 ， 并 且 该 原型 可 以 在 
Internet Explorer, Safari, Firefox 或 者 Chrome 等 多 个 浏览 器 中 浏览 ， 图 1-41 
如 图 1-42 所 示 。 








1-42 
决策 者 、 开 发 者 和 测试 者 无 须 安装 Axure RP 或 者 是 特定 的 浏览 器 。 用 户 可 以 把 自己 的 文档 发 
布 到 网 络 上 ， 或 者 在 https://share.axure.com 上 进行 分 享 。 
4. 自己 的 原型 设计 就 是 自己 的 品牌 
自己 的 网 站 原型 就 应 该 拥有 自己 的 品牌 ， 所 以 可 以 添加 Logo 图 片 和 标题 到 自己 的 原型 中 ， 突 出 
个 人 网 站 原型 设计 的 特点 。 





1.5.3 ”独立 保存 文档 

提 到 文档 ， 相 信用 户 并 不 陌生 ， 使 用 Axure RP 文档 也 是 特色 功能 之 一 ， 具 体 和 Word 等 文档 
有 什么 不 同 ， 下 面 将 向 用 户 详细 讲解 。 

1. 元 件 说 明和 页 面 说 明 

用 户 可 以 为 元 件 和 页 面 添 加 说 明 , 从 而 更 好 地 解释 原型 的 背景 情况 和 对 原型 进行 详细 的 功能 描述 。 
说 明 按照 自 定义 的 字段 进行 组 织 ， 以 便 更 好 地 管理 信息 和 使 文档 标准 化 。 页 面 说 明 还 可 以 针对 不 同 的 
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受众 进行 不 同 的 分 类 ， 如 图 1-43 所 示 。 
2. 强大 的 、 可 自 定义 的 Word 文档 生成 器 
Axure RP 可 以 生成 自 定义 页 头 、 页 脚 、 标 题 页 和 标题 样式 的 Word 文档 模板 , 如 图 1-44 所 示 。 
选择 是 一 栏 显示 还 是 两 栏 显示 ， 设 定 选项 ， 点 击 立刻 生成 自 定义 文档 说 明 ， 即 可 使 用 。 
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3. 导出 文档 


Axure RP 不 仅 可 以 导出 所 有 的 元 件 说 明和 页 面 说 明 ， 还 可 以 导出 元 件 的 一 些 值 ， 例 如 将 列表 元 
件 或 者 下 拉 类 别 元 件 中 的 所 有 供 选择 的 值 导出 为 Word 文档 。 用 户 可 以 随时 选择 是 要 导出 哪些 有 说 明 
的 元 件 或 者 所 有 的 元 件 。 

4. 通过 过 滤器 将 元 件 分 类 ， 然 后 导出 为 不 同 的 文档 

用 户 可 以 根据 元 件 说 明 中 的 不 同 值 ， 通 过 设 定 过 滤器 的 方式 ， 将 不 同 值 的 说 明 分 别 导出 。 如 果 用 
户 在 跟踪 某 个 特定 的 版 本 或 者 在 说 明 中 更 改 了 需求 , 仅仅 导出 某 个 版 本 或 者 某 个 变化 后 的 说 明 即 可 (在 
本 书 的 第 6 章 向 用 户 详细 讲解 该 内 容 )。 


合作 就 是 个 人 与 个 人 、 群 体 与 群体 之 间 为 达到 共同 目的 、 彼 T7 - 
此 相互 配合 的 一 种 联合 行动 方式 。 在 Axure RP 项 目 中 也 可 以 通 | 70mm 000 
过 合作 的 方式 更 出 色 地 完成 项 目 。 e 

1. 在 设计 团队 中 共享 项 目 d 

使 用 共享 项 目 可 以 在 所 有 成 员 间 同步 工作 。Axure RP 会 保 
留 所 有 的 工作 历史 ， 并 且 如 果 需 要 的 话 ， 可 以 导出 之 前 版 本 的 项 
目 文档 。 使 用 一 个 共享 的 网 络 目 录 可 以 建立 共享 项 目 。 最 棒 的 是 ‖ 二 EGG 
这 些 都 是 免费 的 。 创 建 团队 项 目 对 话 框 如 图 1-45 所 示 。 

2. 共享 用 户 自己 的 项 目 并 且 获 得 反馈 三 [一 一 | 

用 户 可 以 把 自己 的 文件 上 传 到 https://share.axure.com,， 1-45 
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原型 会 在 几 分 钟 之 内 自动 生成 并 且 共享 。 通 过 设 定 密码 ， 让 只 有 授权 的 人 才 可 以 访问 ， 还 可 以 在 共享 
的 项 目 中 开启 讨论 功能 , 大 家 可 以 在 用 户 的 原型 中 进行 讨论 ( 在 本 书 的 第 7 章 向 用 户 详细 讲解 该 内 容 )。 


Axure RP 对 工作 流程 改进 的 一 个 重要 方法 是 可 以 为 团队 提供 自 定义 的 元 件 ， 这 有 效 地 节约 了 大 
家 的 时 间 ， 并 提高 了 项 目的 一 致 性 。2015 年 8 月 推出 了 Axure RP 8.0， 下 面 将 向 用 户 介绍 Axure 
RP 8.0 的 三 大 新 增 功 能 。 


1.6.1 钢笔 工具 


全 新 的 钢笔 工具 可 以 让 用 户 自己 绘制 自 定义 的 元 件 。 由 于 这 些 图 形 都 是 矢量 图 ， 用 户 可 以 对 它们 
进行 自由 拉 伸 ， 另 外 还 可 以 改变 它们 的 填充 和 边框 ， 这 对 于 设计 图 标 、 图 表 、 弯 曲 箭头 、 图 案 轮 廓 和 
按钮 等 是 非常 有 用 的 ， 如 图 1-46 所 示 。 还 可 以 使 用 合并 、 去 除 、 相 交 和 排除 等 选项 来 选择 图 像 ， 如 
1-47 所 示 是 使 用 钢笔 工具 和 去 除 选 项 来 创建 一 个 自 定义 的 表情 符号 。 
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图 1-46 图 1-47 
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高 保 真 原型 对 于 赢得 用 户 的 购买 意愿 是 非常 有 帮助 的 。 对 于 高 保 真 的 原型 ，Axure RP 8.0 提供 
了 一 些 新 特性 使 其 更 加 丰富 ， 如 图 1-48 所 示 。 





Axure RP 8.0 可 以 在 同一 时 间 使 一 个 对 象 运行 多 个 动画 ， 例 如 在 移动 的 同时 颜色 变 淡 ， 如 
1-49 所 示 。 还 能 够 以 动态 旋转 对 象 设置 对 象 的 形状 和 大 小 ， 可 以 翻转 动画 ， 如 图 1-50 所 示 。 
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ROTATE, MOVE, AND FADE A WIDGET SIMULTANEOUSLY [| ROTATE, MOVE, AND FADE A WIDGET SIMULTANEOUSLY 





图 1-49 


FLIP BETWEEN DYNAMIC PANEL STATES FLIP BETWEEN DYNAMIC PANEL STATES 


o > 





图 1-50 
此 外 ，Axure RP 8.0 在 交互 上 还 会 有 一 些微 妙 但 有 效 的 改进 。 例 如 ， 添 加 了 两 个 新 的 事件 一 一 
窗口 向 下 滚动 时 和 窗口 向 上 滚动 时 。 中 继 器 元 件 是 Axure RP 7.0 版 本 新 增加 的 功能 ， 备 受用 户 好 评 。 














在 Axure RP 8.0 中 ， 它 被 升级 到 拥有 更 多 的 不 同 尺寸 。 





创建 完全 清晰 的 交互 设计 文档 耗 时 且 乏 味 。 其 中 很 大 一 部 分 时 间 被 用 来 创建 和 更 新 需要 传达 
给 团队 的 各 种 状态 的 屏幕 截图 。 专 业 版 的 自动 化 Word 文档 生成 器 非常 强大 ， 但 在 原型 的 丰富 上 ， 
它 有 很 大 的 局 限 性 。 已 经 有 越 来 越 多 的 用 户 开 始 选择 在 Axure RP 上 创建 自 定义 文档 , 如 图 1-51 
所 示 。 

Axure RP 8.0 的 快照 元 件 则 在 更 快 地 创建 和 更 新 自 定义 文档 。 它 可 以 被 用 于 捕捉 页 面 图 像 并 对 
引用 进行 管理 ， 用 户 可 以 拖 动 和 缩放 快照 页 面 的 特定 部 分 。 当 页 面 出 现 改变 以 后 ， 快 照 也 会 自动 进行 
相应 改变 。 

可 以 对 引用 的 页 面 指 定 动作 以 此 捕捉 它 的 特定 状态 。 例 如 ， 可 以 在 页 面 的 “点 击 ”按钮 上 使 用 新 
的 交互 事件 行为 ， 并 得 到 按钮 被 点 击 之 后 的 页 面 快 照 。 如 果 改 变 了 按钮 的 交互 行为 ， 快 照 也 会 自动 更 
新 。 这 对 于 流程 图 是 非常 有 用 的 ， 现 在 可 以 看 到 一 系列 事件 的 页 面 缩 略 图 ， 如 图 1-52 所 示 。 
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1.6.4 ”其 他 新 增 功能 


另外 ，Axure RP 8.0 还 有 其 他 的 一 些 新 增 功能 ， 具 体 如 下 。 
环境 的 更 新 。 

新 增加 默认 元 件 和 元 件 样式 。 

增加 群 组 功能 。 

流程 图 。 

行为 动作 。 

动画 。 

新 增 事 件 。 

团队 项 目 。 

中 继 器 。 


这 些 新 增 功能 将 在 后 面 的 各 章节 中 向 用 户 详细 讲解 ，Axure RP 8.0 将 会 向 用 户 呈 现 
出 一 个 全 新 的 工作 环境 ， 提 高 设计 师 的 工作 效率 。 
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还 有 很 多 其 他 软件 可 以 用 来 做 原型 设计 ， 例 如 Visio. Word 和 Photoshop 等 。 它 们 都 是 非常 
强大 的 软件 , 但 是 对 于 网 站 原型 的 制作 工作 来 说 , 没有 比 Axure RP 更 贴近 需求 的 了 。 如 表 1-1 所 示 ， 
简单 地 向 用 户 对 比 一 下 这 几 个 软件 ， 从 而 可 以 具体 了 解 Axure RP 的 优势 。 


i-i 各 软件 的 对 比 
| | Word | Photoshop | visio | AxureRP 


简 述 微软 出 品 的 文档 编辑 Adobe 公司 出 品 的 图 微软 出 品 的 可 视 化 模型 Axure 公司 出 品 的 网 页 
工具 片 编辑 软件 和 流程 软件 原型 软件 
特长 文字 编辑 、 排 版 图 片 编辑 、 平 面 创意 ”流程 图 、 网 络 图 、 工 作 网 页 建 模 、 原 型 图 和 线 
图 、 软 件 图 和 结构 图 — 框图 
网 页 模型 排版 低 ( 对 齐 很 难 ) 自由 自由 自由 
能 力 
生成 格式 doc/docx psd/jpg/png vsd/html html/rp 
互动 无 互动 ， 静 态 文档 。 ”无 互动 ， 静 态 图 片 。 “简单 的 基于 点 击 的 互动 支持 各 种 基于 HTML 
的 互动 效果 
适用 者 产品 经 理 、 项 目 经 理 、 平面 设计 师 、 网 页 开 产品 经 理 、 项 目 经 理 。 产品 经 理 、 平 面 设计 师 、 
测试 经 理 发 工程 网 页 开发 工程 师 、 测 试 
经 理 、 营 销 经 理 、 项 目 
经 理 
学 习 难 度 容易 容易 容易 容易 
安装 文件 大 小 几 百 MB 几 GB 几 MB 几 十 MB 
演示 文件 不 适合 演示 不 适合 演示 适合 适合 
制作 线 框图 RAW 困难 容易 但 是 无 法 互动 容易 
多 人 协作 只 能 通过 批注 的 模式 ”困难 x 有 
版 本 管理 无 无 无 有 
A Flash Æ 无 无 有 
原型 真实 程度 低 高 高 高 


在 生活 中 经 常会 看 到 建筑 设计 图 、 样 板 间 和 一 些 数码 产品 的 概念 设计 图 、 概 念 车 ， 这 些 都 是 原型 
的 不 同体 现 。 

如 图 1-53 所 示 ， 这 是 两 种 常见 的 用 户 体验 原型 设计 模型 。 

A 种 模式 原型 : 完全 依赖 于 前 端 开发 者 来 表达 交互 的 想法 ， 并 且 要 承受 被 拒绝 采用 或 多 次 修改 的 
风险 。 在 此 场景 中 ， 用 户 体验 设计 师 创 建 静态 线 框图 ， 前 端 开发 者 将 其 转换 为 HTML. 

B 种 模式 原型 : 设计 师 自己 开发 原型 ， 自 己 学 会 HTML、CSS 和 JavaScript， 线 框图 和 可 交互 
原型 都 靠 自 己 一 手 搞定 。 

Axure RP 给 提供 了 第 三 种 选择 ， 用 户 体验 设计 师 不 必 依赖 前 端 工 程 师 ， 也 不 用 让 自己 成 为 程 
序 员 。 
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图 1-53 
虽然 Axure RP 8.0 的 学 习 曲 线 比 较 苛刻 ， 但 是 一 旦 掌握 Axure RP， 就 可 以 轻松 地 实现 自己 设 
想 的 非常 现代 的 用 户 体验 效果 。 使 用 Axure RP 可 以 将 一 个 概念 落实 为 线 框图 ， 再 进一步 制作 成 高 保 
真 原型 ， 甚 至 可 以 根据 需求 制作 响应 式 布局 来 适 配 不 同 尺 寸 的 屏幕 。 


如 果 用 户 熟悉 编码 ，Axure 对 JavaScript 和 CSS 的 支持 是 非常 强大 的 ; 如 果 
用 户 不 熟悉 编码 ， 仍 然 可 以 创建 令 人 惊叹 的 产品 原型 ， 而 不 需要 编写 一 行 代码 。 


1.9 





事实 证 明 ， 原 型 不 是 今天 才 发 明 的 。 原 型 的 价值 贡献 、 投 资 回报 率 和 原型 技术 术语 至 少 已 有 上 干 
年 历史 。 相 比 传统 原型 设计 ， 软 件 原 型 设计 需要 丰富 的 用 户 体验 ， 这 是 UX 对 设计 师 的 巨大 挑战 (UX 
全 称 User Experience， 中 文 名 “用 户 体验 ”)。 

1. 情景 化 

原型 是 模拟 用 户 在 界面 上 的 操作 流程 ， 系 统 也 要 对 用 户 的 操作 做 出 响应 。 通 常 ， 流 程 要 考虑 多 方 
面 因 素 ， 带 有 很 多 条 件 ， 要 经 过 多 步 才能 顺利 完成 。UX 设计 师 能 够 使 用 的 交互 模式 ， 已 经 比 十 年 前 
要 丰富 得 多 了 ， 如 图 1-54 所 示 。 
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2. 多 种 屏幕 大 小 

原型 设计 必须 考虑 屏幕 大 小 。 例 如 ， 各 种 屏 
幕 尺寸 的 手机 、 平 板 电脑 、 个 人 电脑 以 及 超大 屏 
幕 的 设备 等 。 屏 幕 大 小 影响 着 用 户 体验 ， 而 用 户 
完成 某 一 项 任务 时 ， 又 会 期 望 在 各 个 屏幕 上 有 一 
致 的 功能 和 体验 ， 如 图 1—55 所 示 。 

3. 页 面 内 异步 更 新 

在 20 世纪 80 年 代 ， 软 件 以 用 户 端 / 服务 器 
(C/S) 模式 为 主 ， 任 务 的 普遍 流程 是 从 一 个 窗口 
跳 转 到 另 一 个 窗口 。 在 20 世纪 90 年 代 的 Web — 
模式 下 ， 常 见 的 Web 导航 是 从 一 个 页 面 超级 链 
接 到 另 一 个 页 面 。 现 在 ， 随 着 页 面 中 数据 的 异步 更 新 ， 多 个 页 面 之 间 切 换 的 情况 有 所 减少 。 页 面 内 异 
步 更 新 ， 使 原型 设计 的 复杂 度 大 大 增加 ， 如 图 1-56 所 示 。 




















图 1-56 


4. 不 同 权限 用 户 的 个 性 化 体验 
根据 不 同 的 用 户 权限 ， 原 型 会 有 不 同 的 应 对 措施 。 对 于 非 注册 用 户 ， 网 站 可 能 会 显示 特殊 的 条 件 
吸引 用 户 注 册 ， 如 图 1-57 所 示 。 
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对 于 已 注册 登录 用 户 ， 网 站 可 能 会 依据 以 往 用 户 所 设置 的 内 容 , 提供 给 用 户 相应 的 信息 。 对 于 付 
费用 户 ， 则 可 以 访问 更 多 内 容 ， 如 图 1-58 所 示 。 
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5. 可 扩展 性 

许多 应 用 程序 是 分 阶段 的 ， 因 此 可 以 基于 战略 目标 、 实 际 预算 和 技术 限制 等 对 项 目的 投入 进行 排 
序 。 原 型 往往 反映 了 完整 的 产品 ， 但 一 个 好 的 原型 也 必须 支持 设计 人 员 精 简 或 扩展 的 功能 。 

6. 本 地 化 

在 全 球 经 济 形势 下 ， 所 开发 的 应 用 程序 必须 易于 本 地 化 ， 以 适应 当地 语言 、 文 化 和 偏好 。 设 计 出 
的 原型 需要 支持 多 种 语言 。 

7. 异常 处 理 

原型 要 演示 出 应 用 程序 在 交互 过 程 中 出 现 异 常 的 情况 。 这 种 异常 可 能 由 用 户 触 发 ， 也 可 能 有 系统 
触发 。 这 也 是 交互 原型 最 难 实现 的 一 项 功能 。 


1.10 


很 多 人 不 清楚 应 该 什么 时 候 使 用 Axure RP， 在 处 理 什么 样 的 项 目 或 任务 时 使 用 Axure RP 最 合 
适 。 下 面 将 向 用 户 介绍 Axure RP 在 生活 中 的 实践 应 用 。 


1.10.1 简单 的 项 目 


在 生活 中 常常 会 遇 到 这 样 的 情形 ， 作 为 策划 者 ， 在 与 用 户 或 者 与 项 目 提 出 者 洽谈 时 ， 常 常会 听 到 


“想法 很 简单 ， 就 是 做 个 简单 的 网 站 ( 或 APP)， 只 需要 一 些 非常 基础 的 功能 ……”， 事 实 上 ， 用 户 
或 者 项 目 提出 者 想 要 的 绝 不 是 他 所 描述 的 那样 简单 。 因 此 在 签订 合同 之 前 ， 用 户 最 好 能 把 所 有 的 详细 
需求 都 一 一 列 出 来 。 


用 户 并 不 知道 自己 想 要 的 “简单 的 ”网 站 ( 或 APP) 到 底 是 什么 样子 。“ 简 单 ” 这 个 词 是 用 来 表 
达 目 的 ， 因 为 通常 情况 下 人 们 对 “简单 ”这 个 词 的 理解 都 会 本 能 地 将 注意 力 集中 在 最 突出 ( 基本 ) 的 
功能 和 所 涉及 的 页 面 数量 上 。 然 而 ， 这 可 能 会 导致 非常 严重 的 误导 。 

1. 少数 页 面 模板 的 组 成 

现代 的 Web 应 用 程序 的 页 面 模板 都 相对 较 少 ， 例 如 首页 、 列 表 页 及 详情 页 等 ， 如 图 1-59 所 示 。 
每 个 页 面 的 复杂 性 可 能 都 不 相同 。 
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图 1-59 


2. 需要 制订 内 容 战略 

内 容 的 展示 需要 适应 不 同 的 设备 ， 这 是 必须 要 考虑 的 重要 条 件 。 对 于 任何 给 定 的 屏幕 ， 至 少 要 考 
虑 3 种 布局 ( 桌面 电脑 、 平 板 电脑 和 手机 )， 如 图 1-60 所 示 。 对 于 某 些 类 型 的 应 用 程序 ， 为 了 确保 
工作 流程 在 多 个 屏幕 中 顺利 进行 ， 工 作 的 复杂 性 可 能 以 指数 倍增 加 。 

3. 应 用 程序 的 用 户 数量 

应 用 程序 的 用 户 数量 ， 也 是 一 个 需要 
注意 的 问题 。 是 否 需要 动态 改变 内 容 ? 是 
否 需要 注册 / 登录 功能 ? 是 否 需要 交易 功 
能 ?是 否 有 动画 效果 ， 是 否 需要 模拟 用 户 
操作 数据 ? 这 些 问题 直接 影响 到 最 终 产品 
的 效果 ， 所 以 要 特别 注意 。 








网 站 : 是 用 来 展示 内 容 的 ， 如 新 闻 、 博 客 等 ， 如 图 1-61 所 示 。 
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网 站 应 用 程序 : 是 用 来 执行 任务 的 ， 例 如 百度 就 是 一 个 网 站 应 用 程序 ， 用 户 使 用 它 执行 搜索 任务 。 
此 外 ， 火 车 票 、 机 票 、 酒 店 的 查询 预订 等 ， 供 用 户 执行 任务 的 都 属于 网 站 应 用 程序 ， 如 图 1-62 所 示 。 
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图 1-62 


网 站 应 用 程序 和 门户 网 站 的 原型 是 最 适合 使 用 Axure RP 的 。 虽 然 有 很 多 门户 网 站 可 用 ， 但 是 

企业 往往 需要 定制 开发 来 增强 某 些 功能 ， 以 便 满足 业务 需求 ， 需 要 注意 以 下 几 点 。 

e ”为 了 确保 项 目 能 够 获得 企业 高 层 的 认可 ， 需 要 先 创建 一 个 简单 的 UX 概念 原型 。 在 实际 项 目 
中 ，UX 的 资源 投入 可 能 很 小 ， 但 对 项 目的 发 展会 产生 重大 影响 。 

e ”高 保 真 原型 的 建立 是 一 个 复杂 的 过 程 。 尽 可 能 记录 自己 的 工作 思路 、 指 导 原 则 、 各 个 相关 者 
的 反馈 意见 、 优 先 顺序 ， 以 及 可 能 存在 分 歧 的 地 方 。 

e 应 用 程序 包含 多 个 模块 ， 代 表 组 织 中 不 同 的 业务 单元 。 通 常情 况 下 ， 这 些 业务 单元 遍布 全 国 
甚至 世界 各 地 ， 每 个 业务 单元 可 能 有 其 自己 的 规则 、 要 求 和 技术 支持 。 这 些 需求 在 集成 到 应 
用 程序 之 前 必须 考虑 到 将 其 简化 、 统 一 。 

e UX 设计 师 需要 拥有 全 局 观 ， 一 个 好 的 UX 设计 师 ， 需 要 具备 务实 与 创新 之 间 保 持 良好 平衡 
的 能 力 。 


在 项 目 早期 ， 指 出 潜在 的 差距 和 实现 风险 。 
在 评审 会 议 中 对 这 些 方面 进行 评审 。 


e ”建立 一 个 共享 项 目 ， 与 团队 成 员 多 沟通 ， 保 证 应 用 程序 的 整体 性 和 一 致 性 。 
e ”为 了 处 理 每 个 模块 的 复杂 性 和 具体 需求 ，UX 团队 还 需要 业务 和 技术 相关 人 员 的 加 入 。 


不 要 擅自 做 任何 假设 ， 询 问 尽 可 能 多 的 关于 术语 、 流 程 和 不 明白 的 地 方 。 


© 


1.10.3 ”移动 应 用 


一 直 以 来 ， 苹 果 公 司 非 常 重视 用 户 体验 。 随 着 移动 设备 和 传统 计算 机 之 间 体 验 差距 的 逐渐 缩 
小 ， 新 的 交互 模式 ( 如 手势 ) 已 被 广泛 运用 。 使 用 Axure RP 的 元 件 可 以 轻松 地 为 主流 移动 设备 ( 如 
iPhone. iPad 和 Android 设备 ) 创建 原型 ， 如 图 1-63 所 示 。 

越 来 越 多 的 公司 想 要 将 传统 计算 机 上 的 Web 程序 扩展 到 移动 设备 上 。 可 以 使 用 Axure RP 为 这 
些 APP 进行 原型 设计 ， 并 在 移动 设备 上 进行 演示 ， 如 图 1-64 所 示 。 



























































1.10.4 ”用 户 验 证 


可 以 利用 企业 提供 的 条 件 进行 用 户 验证 活动 ， 例 如 可 用 性 测试 。 最 重要 的 是 把 控 好 用 户 验 证 在 项 
目 中 的 预算 和 时 间 表 ， 还 有 要 用 到 的 交互 原型 质量 ， 这 对 于 复杂 的 应 用 程序 尤其 重要 。 在 进行 可 用 性 
测试 之 前 ， 要 确保 可 用 性 测试 的 场景 是 建立 在 原型 中 的 ， 因 为 计划 以 外 的 场景 可 能 会 导致 大 量 的 问题 ， 
造成 不 必要 的 返工 和 修改 。 


1.10.5 启发 式 评估 


在 对 一 个 应 用 进行 重新 设计 时 ， 设 计 师 的 任务 之 一 是 对 现 有 用 户 界面 进行 启发 式 分 析 。 分 析 结 果 可 
以 帮助 决策 者 确定 项 目 涉及 的 范围 、 预 算 和 时 间 表 ， 并 让 设计 师 有 机 会 熟悉 应 用 程序 和 现 有 的 用 户 体验 。 

可 以 在 Axure RP 页 面 中 插入 屏幕 截图 ， 快 速 创建 一 个 应 用 程序 的 复制 品 。 在 屏幕 截图 的 合适 位 
置 添加 更 多 的 细节 内 容 ， 如 操作 按钮 ， 创 建 一 个 原型 。 在 相关 说 明 字 段 上 添加 说 明 ， 生 成 一 个 HTML 
原型 和 一 个 Word 文档 ， 可 以 使 用 此 原型 文档 向 所 涉及 的 部 门 展示 结果 。 


1.10.6 原型 和 规范 文档 


通常 情况 下 ， 用 户 都 会 要 求 设计 师 给 出 线 框图 、 高 保 真 原型 和 Word 规范 文档 。 下 面 所 列 出 的 是 
设计 师 需 要 重点 考虑 的 内 容 ( 如 果 用 户 对 其 内 容 不 了 解 ， 后 面 的 章节 会 详细 讲解 )。 
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Axure RP 是 一 款 很 好 的 原型 设计 工具 ， 重 要 的 是 在 处 理 不 同 规模 的 项 目 、 面 对 不 同 的 问题 时 ， 
如 何 将 这 款 工 具 的 价值 最 大 化 地 发 挥 出 来 。 

e ”向 开发 团队 索要 一 份 使 用 过 的 规范 文档 ， 体 验 一 下 什么 格式 的 项 目 文档 是 可 接受 的 。 

e ”如 果 用 户 需要 设计 师 提供 交互 原型 ， 他 对 原型 所 预期 的 交互 是 什么 样 的 ?用 户 的 期 望都 是 基 
于 过 去 的 经 验 ， 设 计 师 可 以 和 用 户 商 谈 浏览 一 下 自己 看 过 的 交互 原型 ， 把 自己 做 过 的 成 功 案 
例 展示 给 用 户 ， 提 高 双方 对 交互 原型 效果 的 共识 。 

e ”如 果 应 用 程序 需要 制作 基于 不 同 角色 的 用 户 登录 效果 ， 你 要 为 每 个 角色 都 制作 完整 的 用 户 体 
验 ， 还 是 只 为 主要 角色 制作 。 仪 这 一 点 就 有 可 能 毁 掉 整 个 项 目 ， 因 为 项 目 负责 人 ( 投资 人 ) 
可 能 想 看 到 每 个 角色 的 不 同 需求 ， 而 你 的 预算 和 工作 计划 中 可 能 只 模拟 了 一 个 角色 的 用 户 体 
验 ， 这 一 点 在 项 目前 期 一 定 要 注意 ， 并 与 项 目 相 关 人 员 沟通 清晰 。 

e ”计算 一 下 制作 静态 线 框图 的 费用 是 多 少 。 制 作 原 型 的 高 保 真 视觉 界面 的 费用 是 多 少 。 是 否 需 
要 快速 制作 出 高 保 真 原型 ， 根 据 高 保 真 原 型 的 设计 细节 和 规范 文档 进行 开发 。 


1.11 


以 下 一 些 技巧 或 提示 ， 可 以 最 大 限度 地 发 挥 Axure RP 在 大 型 项 目 中 的 作用 。 

Axure RP 可 以 促进 设计 的 一 致 性 ， 但 是 无 法 强制 ， 所 以 要 通过 管理 手段 确保 设计 的 一 致 性 。 
让 所 有 团队 统一 和 正确 地 创建 线 框图 很 重要 。 

创建 线 框图 和 动态 面板 时 , 要 约定 一 个 命名 规范 .管理 审核 时 , 要 对 这 些 命名 的 合理 性 进行 审核 。 
对 线 框图 的 组 织 和 结构 进行 统一 ， 让 所 有 团队 使 用 这 种 统一 的 结构 。 

要 花 时 间 使 用 Axure RP 的 细节 。 

在 项 目 开 始 时 ， 尝 试 合理 地 使 用 母 版 和 动态 面板 ， 统 一 使 用 一 种 方法 。 在 管理 审核 时 ， 要 验 
证 执行 情况 。 

e ”注意 在 项 目 计 划 中 Axure RP 的 文件 时 间 。 

e ”在 进行 可 用 性 测试 、 重 大 设计 修改 之 前 ， 要 对 Axure 项 目 文件 进行 重新 审核 。 


1.12 


近年 来 ，Axure RP 已 成 为 许多 UX 设计 师 的 首选 工具 ， 它 在 功能 、 复 杂 性 和 投入 成 本 之 间 找 到 
了 平衡 ， 是 展示 设计 创意 和 想法 的 最 佳 工具 。 本 章 向 用 户 详细 介绍 了 Axure RP 的 发 展 、 原 型 设计 
的 应 用 和 不 同 原型 设计 工具 之 间 的 区 别 。Axure RP 8.0 是 Axure 公司 推出 的 最 新 版 本 ， 本 章 向 用 户 
简单 介绍 了 Axure RP 8.0 的 新 增 功能 。 通 过 深入 了 解 Axure RP 满足 自己 需求 的 同时 ， 也 要 记 住 
Axure RP 只 是 一 个 原型 设计 工具 而 已 ， 进 行 交互 设计 最 重要 的 还 是 想法 ， 工 具 只 是 用 来 帮助 实现 想 
法 的 。 不 必 过 于 追求 技术 ， 不 必 过 于 追求 视觉 表现 。 把 握 好 整个 产品 方向 的 同时 ， 应 专注 于 交互 流程 、 
页 面 内 交互 、 布 局 结构 的 创新 和 优化 。 
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如 果 用 户 不 想 使 用 Axure RP T, SILUBIS E SERERE TEREULERRE URS CREE RERO (070 Sx 
Axure RP 8.0, 


O zæ 
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ME Awe oO Beta i Wizard b 
[=] Completing the Axure RP 8.0 Beta 

如 果 用 户 不 需要 再 使 用 Axure RP， 可 以 IN Uninstal Wizard 

选择 卸载 该 软件 。 如 果 想 要 再 次 使 用 该 软件 ， 则 | 

需要 再 次 安装 。 印 载 xure RP 8.0 的 具体 操作 | 

如 下 。 
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打开 “控制 面板 ”， 单 击 “ 程 序 和 功能 ” 选择 需要 卸载 的 Axure RP 8.0 软 件 列表 。 
图 标 。 


Mg Axure RP 8.0 Beta ~ InstallAware Wizard bel M Arure RP 80 Beta - Installaware Wizard 
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Updating Your System [ss Completing the Axure RP 8.0 Beta 
Uninstall Wizard 
ME en aaya aani ie miei ear ia 
gic aia ves | You have cce congleted the Aure RP 810 Beta Setup 
| fea 
Uninstalling files and settings 
Details ! | 
File: dec-mcs so. Directory: D:\Program Fies (x86) VAxureVixure RP 8.0 
BelaNcon 
[yum o ; M 
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本 章 知 识 点 [2 
^4 Axure RP 欢迎 界面 


^ Axure RP 工作 界面 | 
^ 使 用 元 件 
/ 使 用 钢笔 工具 

检视 面板 


^ 概要 面板 




















第 一 次 安装 完成 后 启动 Axure RP 8.0 时 , 首先 会 看 到 Axure RP 8.0 的 欢迎 界面 , 如 图 2-1 所 示 。 
在 欢迎 界面 中 ， 用 户 可 以 进行 新 建 项 目 文档 和 打开 最 近 打 开 的 项 目 等 操作 。 


IR... 
WELCOME TO AXURE RP eei a toy aod iro chus 


and publish your frst prototype. 
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Axure RP 8.0 版 本 。 执 行 “ 帮 助 > 检查 更 新 ”命令 ， 可 以 检查 是 否 
发 布 了 新 版 本 ， 如 图 2-2 所 示 。 
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iess =s 
|| STEE: 8.00.3253 


AxureRP8.00.3267BetaUpdate — 
11/6/2015 - Bug Fixes 





- Fixed rendering Dynamic Panels when moving in editor 

- Fixed Set Text in Repeaters 

- Fixed HTML error when Repeater contains unplaced Dynamic Panel 
- Fixed HTML error when Repeater is unplaced in Adaptive View 

- Fixed error in action for a Repeater in a Snapshot 

- Fixed some lines not rendering. 

- Fixed Placeholder rendering with thick lines 





Axure RP 8.0.0.3266 Beta Update 
11/5/2015 - Bug Fixes 


- Group fixes (Set Size, rotation, deleting, Adaptive Views, Masters, order, push/pull) 
- Print fixes (page ordering, master folder) 

- Custom Shape fixes (dashed, sketchy, lines, fills, mitering, lines, Adaptive Views) 

- Pen tool fixes (curve points, de-select, editing, pan mode) 

- SVG fixes (caching, size, anchoring, autofit, preview, Ix Styles) 

- Snapshot fixes (preview, editing applied actions, Repeaters, selected) 

- Repeater fixes (actions from outside, index, borders, Adaptive Views, background) 

- Team fixes (browse history, export, push/pull, default style) E 
- Animatinn fivac ffin slide anrhnrinm rentaradi 

后 Aure RP 启动 时 检查 更 新 

E 包含 测试 版 更 新 内 容 

















图 2-2 
最 近 打开 的 项 目 : 显示 最 近 打开 的 项 目 ， 或 者 打开 一 个 新 的 项 目 。 


新 建 项 目 文档 : rp 文档 是 Axure RP 的 本 地 文件 ， 后 面 的 章节 中 会 向 用 户 详细 讲解 。 
新 增 功能 及 帮助 文件 : 查看 更 新 版 本 后 的 新 增 功能 及 使 用 方法 。 









































在 Windows 版 本 中 ，Axure RP 可 以 同时 运行 多 个 应 用 实例 ， 每 个 实例 可 以 打开 一 
个 项 目 文件 。 在 Mac 版 本 中 ， 一 个 Axure RP 版 本 只 能 运行 一 个 应 用 实例 ; 不 同 的 
版 本 可 同时 运行 ， 例 如 Axure RP 7.0 和 Axure RP 8.0 可 以 同时 打开 。 





Axure RP 8.0 的 工作 界面 与 以 前 的 版 本 相 比 有 了 很 大 的 变化 ， 精 简 了 很 多 面板 ， 使 软件 变 得 更 
加 简单 、 直 接 ， 便 于 设计 师 使 用 。 




















2.2.1 了 解 工作 界面 




















Axure 的 工作 界面 非常 简单 、 直 观 ， 主 要 分 为 菜单 栏 、 工 具 栏 、 样 式 工具 栏 、 工 作 区 和 各 个 面板 ， 
如 图 2-3 所 示 。 
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页 面 编辑 面板 ( 线 框图 编辑 区 ) 


图 2-3 


Axure RP 8.0 的 工作 界面 与 以 前 的 版 本 相 比 有 很 大 改变 ， 在 Axure RP 8.0 中 减少 
国 了 控件 交互 面板 、 控 件 属性 面板 和 控件 管理 面板 。 
启动 Axure RP 8.0 后 ， 默 认 会 弹出 欢迎 界面 ， 在 该 界面 中 用 户 可 以 快速 完成 新 建 和 浏览 最 近 打 
开 的 文件 ， 也 可 以 了 解 Axure RP 8.0 有 什么 新 功能 ， 如 图 2-4 所 示 。 
如 果 用 户 不 希望 每 次 启动 软件 都 启动 欢迎 界面 ， 可 以 勾 选 欢迎 界面 左下 角 的 “不 再 显示 ” 复 选 框 ， 
这 样 下 次 启动 软件 时 ， 将 不 会 显示 欢迎 界面 。 可 以 通过 执行 “帮助 > 打开 欢迎 界面 ”命令 ， 再 次 打开 
欢迎 界面 ， 如 图 2-5 所 示 。 
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at 8 有 什么 新 功 租 了 打开 欢迎 界面 ..<D> N 
r Wenn 管理 授权 .<O> 
m 
检查 更 新 .<C> 
| 关于 Axure RP Pro..«A» 
iid -m-- 关于 汉化 .<T> 
图 2-4 图 2-5 


1. 菜单 栏 

Axure RP 8.0 一 共 包含 了 8 个 菜单 ， 每 个 菜单 中 包含 同类 的 操作 命令 。 用 户 可 以 根据 要 执行 的 
操作 类 型 在 对 应 的 菜单 下 选择 操作 命令 。 

VARE, 该 菜单 下 的 命令 主要 用 于 实现 文件 的 基本 操作 ， 例 如 新 建 、 打 开 、 保 存 和 打印 等 命令 ， 


Q3 
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如 图 2-6 所 示 。 

MERS. 该 菜单 包含 软件 操作 过 程 中 的 一 些 编辑 命令 ， 例 如 复制 、 粘 贴 、 全 选 和 删除 等 命令 ， 
如 图 2-7 所 示 。 

MEFS. 该 菜单 包含 与 软件 视图 显示 相关 的 命令 ， 例 如 工具 栏 、 功 能 区 和 显示 背景 等 命令 ， 如 
2-8 所 示 。 
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IBI. 该 菜单 包含 与 项 目 相关 的 命令 ,例如 元 件 样式 编辑 、 全 局 变量 和 项 目 设置 等 命令 ， 如 
2-9 所 示 。 

布局 菜单 : 该 菜单 包含 与 页 面 布局 相关 的 命令 , 例如 组 合 、 对 齐 、 分 布 和 锁定 等 命令 , 如 图 2-10 所 示 。 

发 布 菜单 : 该 菜单 包含 与 原型 发 布 相关 的 命令 ， 例 如 预览 、 预 览 选项 和 生成 HTML 文件 等 命令 ， 
如 图 2-11 所 示 。 
E] S85. 该 菜单 包含 与 团队 协作 相关 的 命令 , 例如 从 当前 文件 创建 团队 项 目 等 命令 , 如 图 2-12 所 示 。 
帮助 菜单 : 该 菜单 包含 与 帮助 相关 的 命令 ， 例 如 在 线 培训 教学 和 查找 在 线 帮助 等 命令 。 
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项 目 设置 .<S> eM 
2-9 2-10 图 2-11 2-12 
2. 工具 栏 


Axure RP 的 工具 栏 和 用 户 熟 悉 的 Office 的 布局 类 似 ， 这 里 主要 向 用 户 介绍 预览 、AxShare 及 
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发 布 ， 如 图 2-13 所 示 。 其 他 工具 在 实际 操作 中 再 向 用 户 详细 讲解 。 
预览 按钮 : 将 当前 的 原型 在 浏览 器 中 进行 预览 。 默 认 情况 下 会 在 系统 默认 的 浏览 器 中 打开 。 
AxShare; 之 前 的 Axure RP 版 本 只 能 Publish( 发 布 ) 到 本 地 。 如 果 要 将 网 站 原型 分 享 给 别人 ， 
只 能 通过 发 送 生 成 HTML 文件 ， 或 者 上 传 到 自己 搭建 的 一 个 Web 服务 器 。 对 于 有 很 多 页 面 的 原型 或 
者 搭建 自己 的 Web 服务 器 来 说 ， 都 不 是 一 件 容易 的 事情 。 从 Axure RP 7.0 有 了 AxShare 之 后 ， 
可 以 发 布 到 Axure 网 站 提供 的 服务 器 上 ， 会 自动 生成 一 个 项 目的 URL 地 址 。 将 这 个 地 址 发 送 给 其 他 
人 ， 他 们 就 可 以 访问 原型 设计 了 。 


AxShare 就 是 Axure 提供 给 所 有 用 户 的 一 个 免费 的 Web 服务 器 。Axure 免费 版 本 
支持 最 多 1000 个 项 目 和 100MB 的 存储 空间 。 


发 布 按钮 : 单 击 “发 布 ” 按 钮 ， 会 出 现 如 图 2-14 所 示 的 下 拉 菜 单 。 
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四 st i 国生 或 word 文 档 .<G> Fo 
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Fi 2-13 图 2-14 


e 预览: 在 浏览 器 中 进行 预览 。 

e ”预览 选项 :设置 一 些 控制 生成 原型 的 参数 。 例 如 在 哪个 浏览 器 中 打开 ， 是 否 要 生成 网 站 地 
图 等 。 

发 布 到 AxShare: 前 面 已 向 用 户 详细 讲解 ， 这 里 不 再 重复 。 

登录 你 的 Axure KS: 在 使 用 Axure RP 软件 之 前 用 户 需要 注册 Axure 账号 。 

生成 HTML 文件 : 将 项 目 生成 HTML 代码 。 

在 HTML 文件 中 重新 生成 当前 页 面 : 在 文件 中 重新 生成 当前 页 面 ， 生 成 的 HTML 文件 是 
整个 网 站 的 原型 。 


因为 当 有 的 页 面 数量 特别 多 的 时 候 ， 如 果 仅 仅 修改 了 一 点 细节 ， 就 重新 生成 整个 项 


国 如 果 用 户 只 修改 了 当前 页 面 的 一 些 细节 , 而 不 是 整个 网 站 , 使 用 这 个 选项 会 更 加 高 效 。 
E 目 会 浪费 时 间 。 


e 生成 Word 文档 : 将 项 目 生成 Word 文档 。 
e ”更 多 生成 器 和 配置 文件 : HTML 生成 器 、Word 生成 器 、CSV 生成 器 及 打印 生成 器 ， 这 
4 种 生成 器 在 第 6 章 具 体 向 用 户 介绍 。 


解 。 关 于 工作 界面 中 的 其 他 区 域 ， 在 本 章 后 面 的 章节 中 会 详细 向 用 户 讲解 ， 这 里 


C2 在 工具 栏 中 新 增加 了 钢笔 工具 ， 钢 笔 工具 的 使 用 在 后 面 的 章节 中 将 向 用 户 详细 讲 
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在 工具 栏 中 还 新 增加 了 如 图 2-15 所 示 的 两 个 按钮 ， 可 以 调整 工作 界面 的 【二 二 
布局 ， 方 便 在 工作 中 对 工作 环境 进行 调整 。 zal 


单 击 “ 左 ”按钮 ，Axure RP 的 工作 界面 如 图 2-16 所 示 ; 单 击 “ 右 ” 按 E 5 
$H, Axure RP 的 工作 界面 如 图 2-17 所 示 。 i-i 






























































图 2-16 图 2-17 





3. 样式 工具 栏 


在 样式 工具 栏 中 可 选中 要 调整 的 元 件 ， 更 改 其 样式 ， 如 同 检视 面板 中 的 “样式 ”标签 一 样 ， 如 
图 2-18 所 示 。 工 具 栏 中 的 各 个 参数 将 在 以 后 的 章节 中 详细 介绍 ， 此 处 不 再 歼 述 。 


[Box -| By | foren - Mm = n0. B 1[wna- z [Es Ej W- 89- 2- -| -| zs yl [wo eno 





图 2-18 

4. 工作 区 人 
设计 师 通常 都 是 在 工作 区 内 完成 产品 原型 的 设计 和 制 
作 的 。 工 作 区 通常 包括 当前 项 目的 名 称 、 标 尺 和 工作 区 3 | 
部 分 ， 如 图 2-19 所 示 。 | 
5. 面板 


在 Axure RP 中 ， 不 同 功能 被 组 合 在 不 同 的 面板 中 ， | 
便于 用 户 使 用 。 关 于 面板 的 具体 功能 ， 将 在 后 面 的 章节 中 
逐一 介绍 。 


2.2.2” 自 定义 工作 界面 图 2-19 


Axure RP 的 工作 界面 可 以 根据 用 户 自己 的 喜好 或 工作 习惯 进行 调整 和 设置 ， 以 便 能 够 最 大 程度 
提高 工作 效率 。 

1. 隐藏 /显示 各 面板 

执行 “视图 > 功能 区 ”命令 ,会 看 到 所 有 面板 的 名 称 ， 如 图 2-20 所 示 。 通 过 勾 选 或 取消 勾 选 ， 
可 设置 对 应 面板 的 显示 或 隐藏 。 

2. 分 离 / 移动 各 面板 

某 些 情况 下 ， 用 户 想 要 让 设计 区 变 得 更 大 些 ， 以 便 获 得 更 广阔 的 视野 ， 这 时 可 以 将 默认 的 工作 界 
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面 中 的 各 个 面板 分 离 ， 还 可 以 移动 面板 的 位 置 。 要 分 离 一 个 面板 ， 单 击 面板 上 的 项 图标; 要 移 除 某 个 
面板 ， 单 击 美 图 标 即 可 ， 如 图 2-21 所 示 。 






































[ru] 5m 2ma EJ zm 2m&ma 
[ E to Axure RP 8 BETA D - 
kuaa D 关 阅 (重新 打开 :视图 - 重 置 视图 ) 
项 目 <P> 布局 <A> ”发 布 <I> 团队 <T> 8 口 oz.6r D 
ups 02: Groups 
IBE-T- , 

: ; X DY 03: Pen Tool and Custom Shapes 口 03: Pen Tool and Custom Shapes 
Eua E 口 04: New Actions and Animations. [3 04: New Actions and Animations 
重合 视图 <R> 元 件 

= 4 [Ì 05: Snapshot Widget 4 [Ì 05: Snapshot Widget 
EE<M> a [ Sampie Login [D Sampie Login 
BIB. m [3 06: Print Guides and Configurations 口 06: Print Guides and Configurations 
OD 07: Team Projects on Axure Share [) 07: Team Projects on Axure Share 
D) Leam More [3 Leam More 
图 2-20 图 2-21 


面板 被 分 离 后 ， 才 可 以 对 其 进行 移动 操作 。 使 用 双 显示 器 时 ， 执 行 “ 分 离 / 移动 ” 操 


加 当面 板 未 被 分 离 时 ， 用 户 无 法 改变 其 默认 位 置 ， 也 无 法 对 其 执行 拖 动 操作 。 只 有 当 
作 是 非常 有 用 的 。 










E77 修改 与 修复 Axure RP 8.0 的 工作 区 
实例 4 教学 视频 : 视频 \ 第 2 € \ 修 改 与 修复 Axure RP 8.0 的 工作 区 .mp4 PXH: 无 





实例 分 析 : 

该 实例 将 工作 界面 调整 为 用 户 较为 习 
惯 的 工作 界面 。 用 户 可 以 根据 需要 在 工作 
时 随时 调整 Axure RP 的 工作 区 。 





制作 步骤 : 


执行 “文件 > 新 建 ”命令 ， 新 建 一 个 项 目 文件 ， 如 图 2-22 所 示 。 用 户 可 以 根据 个 人 的 喜好 
调整 工作 界面 的 布局 方式 ， 如 图 2-23 所 示 。 


执行 “视图 > 重 置 视图 ”命令 ， 如 图 2-24 所 示 。 即 可 将 工作 区 重 置 为 默认 的 工作 界面 ， 如 
2-25 所 示 。 
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无 论 是 一 个 网 页 制作 的 新 手 ， 还 是 一 个 专业 的 网 页 设计 师 ， 
都 要 从 构建 站 点 开始 ， 厘 清 网 站 结构 的 脉络 。 当 然 ， 不 同 的 网 站 
有 不 同 的 结构 ， 功 能 也 不 会 相同 ， 所 以 一 切 都 是 按照 需求 组 织 站 


点 的 结构 。 


使 用 Axure RP 为 网 站 设计 原型 或 者 为 移动 APP 设计 原型 ， 都 
需要 将 所 有 的 页 面 放置 在 同一 个 文件 中 ， 方 便 用 户 管理 和 操作 。 新 
建 一 个 Axure 文件 时 会 自动 为 用 户 创建 4 个 页 面 ， 包 括 1 个 主页 和 
3 个 二 级 页 面 ,用 户 可 以 在 “页 面 ”面板 中 查看 , 如 图 2-26 所 示 。 





新 建 页 面 : 单 击 “新 建 页 面 ”按钮 即 可 新 建 页 面 。 











新 建文 件 夹 .如 果 创建 了 非常 多 的 页 面 ， 建 议 使 用 文件 夹 进 


行 管理 ， 如 图 2-27 所 示 。 
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SE. 在 大 型 原型 项 目 中 往往 有 很 多 页 面 且 层 层 嵌 套 ， 搜 索 可 以 大 大 节省 查找 页 面 的 时 间 。 单 
击 “ 放 大 镜 ” 按 钮 可 以 隐藏 显示 其 下 方 的 搜索 框 ， 如 图 2-28 所 示 。 
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图 2-27 2-28 





ft Axure RP 8.0 的 页 面 管理 面板 |40 index 
中 , 减少 了 “移动 页 面 位 置 ” 按钮 、“ 修 yp | CES 


Ctrl+Shift+Return 








改 页 面 的 小 套 关系 ”按钮 以 及 “删除 ” | Da dr zers 
按钮 ， 用 户 可 以 选中 要 进行 操作 的 页 | QUU e We atem 
面 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 | mcer | MER (norme 
进行 操作 ， 如 图 2-20 所 示 。 | 
图 表 类 型 <T> * | 
生成 流程 图 | 
图 2-29 


用 户 需要 对 一 个 页 面 重 命名 时 ， 只 需 单 击 选中 该 页 面 ， 然 后 输入 新 的 名 称 即 可 。 同 
时 要 注意 谨慎 地 执行 页 面 删 除 操作 ， 因 为 删除 后 的 页 面 不 能 恢复 。 


用 户 在 操作 页 面 面 板 中 的 页 面 时 ， 双 击 这 个 页 面 就 会 出 现在 页 面 编辑 面板 中 ， 如 图 2-30 所 示 。 
鼠标 现在 所 指 的 页 面 上 会 显示 一 个 小 的 预览 图 ， 如 图 2-31 所 示 。 
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图 2-30 图 2-31 


元 件 是 Axure RP 制作 原型 的 最 小 单位 。 熟 悉 每 个 元 件 的 使 用 方法 和 属性 是 制作 一 个 作品 的 前 提 。 
Q 36 
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2.4.1 元件 面 板 概述 


元 件 面板 中 有 Axure RP 的 内 置 元 件 ， 如 图 2-32 所 示 。 元 件 分 为 默认 元 件 和 流程 图 两 种 ， 可 以 
载 入 和 管理 第 三 方 元 件 ， 可 以 使 用 流程 图 元 件 创建 流程 图 等 ， 在 后 面 的 章节 中 将 会 向 用 户 详细 讲解 。 


选项 : 可 以 对 自 定义 元 件 和 第 三 方 元 件 进行 管理 。 
SUL. 会 出 现 一 个 搜索 框 ， 用 于 搜索 元 件 。 











使 用 选择 元 件 下 拉 茉 单 ， 可 以 在 默认 元 件 、 流 程 图 元 件 和 全 部 元 件 之 间 切 换 ， 如 图 2-33 所 示 。 
Axure 元 件 默认 分 为 4 类 一 一 基本 元 件 、 表 单元 件 、 表 单 和 表格 以 及 标记 元 件 ， 如 图 2-34 所 示 。 
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Axure RP 8.0 中 增加 了 新 的 默认 元 件 和 标记 元 件 ， 如 图 2-35 所 示 。 








图 2-34 
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2.4.2 ”默认 元 件 


线 框图 是 由 一 系列 元 件 构成 的 ， 要 添加 元 件 ， 只 要 将 需要 的 元 件 拖 放 至 编辑 面板 中 即 可 。 不 过 ， 
Axure RP 内 的 元 件 分 别 有 着 不 同 的 属性 、 特 性 和 局 限 性 ， 要 想 学 好 Axure RP， 首 先 要 熟悉 这 些 基 
础 元 件 。 

ETE: 将 其 拖 入 到 页 面 中 ， 即 可 创建 德 形 。 和 矩形 元 件 是 一 个 很 好 用 的 元 件 , 在 Axure RP 8.0 
中 新 增加 了 和 矩形 元 件 ， 如 图 2-36 所 示 。 

到 片 元 人 伯 用 户 可 以 导入 任何 尺寸 的 JPG、GIF 和 PNG 图 片 , 还 可 以 使 用 Axure RP 的 切 图 功能 ， 
将 导入 的 一 张 图 片 分 割 成 多 个 符合 页 面 布局 的 小 图 片 ， 如 图 2-37 所 示 。 






































EM ied 
[3 EJ ~ 
SERA ER JEE 矩形 4 

图 2-36 图 2-37 


在 Axure RP 中 导入 图 片 
实例 b. 教学 视频 : 视频 \ 第 2 章 \ 在 Axure RP 中 导入 图 片 .mp4 


源 文件 : 源 文件 \ 第 2 章 \ 在 Axure RP 中 导入 图 片 .rp 






实例 分 析 : 
该 实例 主要 讲解 在 T 

Axure RP 中 编辑 页 面 ， 

向 页 面 中 添加 图 片 元 件 。 

用 户 要 掌握 如 何 导入 图 片 “ 

和 在 同一 个 项 目 文件 中 同 =- 

时 导入 多 个 图 片 元 件 。 =- 











制作 步骤 : 


执行 “文件 > 新建” 命令 ， 新建 一 个 项 目 文件 ， 如 图 2-38 所 示 。 将 图 片 元 件 拖 忠 到 页 面 编 
辑 区 内 ， 设 置 图 片 元 件 的 坐标 为 X0、Y0， 尺 寸 为 W600、H600， 如 图 2-39 所 示 。 
双击 图 片 元 件 ， 弹 出 “打开 ”对 话 框 ， 选 择 要 导入 的 图 片 ， 如 图 2-40 所 示 。 单 击 “确定 ” 
按钮 , 将 图 片 导入 编辑 区 内 , 弹出 提示 对 话 框 , 单 击 “是 ”或 “ 否 ” 按钮 , 即 可 将 图 片 导 入 , 如 图 2-41 
所 示 。 

单 击 “是 ”按钮 ， 图 片 将 等 比例 缩小 ， 图 片 尺寸 变 小 且 不 清晰 ， 如 图 2-42 所 示 。 单 击 “ 否 ” 
按钮 ， 图 片 较 大 且 清 晰 ， 如 图 2-43 所 示 。 
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图 2-43 


当 导 入 的 图 片 较 大 时 ， 会 影响 程序 的 运行 速度 ， 会 提示 用 户 是 否 将 图 片 进行 优化 。 
优化 是 将 图 片 等 比例 缩小 。 


占 位 符 元 件 ， 占 位 符 元 件 没有 实际 的 意义 ， 只 是 具有 临时 占 位 的 功能 。 当 用 户 需 要 在 页 面 上 预 留 
一 块 位 置 ， 但 是 还 没有 确定 要 放 什么 内 容 的 时 候 ， 可 以 选择 先 放 一 个 占 位 符 元 件 ， 如 图 2-44 所 示 。 

默认 按钮 、 主 要 按钮 和 链接 按钮 元 件 : 这 些 是 原来 的 形状 按钮 元 件 ， 如 图 2-45 所 示 。 这 些 按钮 
具有 特殊 的 功能 ， 例 如 Tab 一 样 的 按钮 、 特 殊 形状 的 按钮 和 支持 鼠标 悬 停 改 变样 式 的 按钮 。 可 以 说 
这 3 个 按钮 结合 了 原来 的 形状 按钮 元 件 和 矩形 元 件 的 优点 。 
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图 2-44 图 2-45 


一 级 、 二 级 和 三 级 标题 元 件 ， 用 于 输入 标题 文本 ， 如 图 2-46 所 示 。 
文本 标签 元 件 和 文本 段落 元 件 : 用 于 普通 文本 和 文字 段落 ， 如 图 2-47 所 示 。 









































H1 H2 H3 A- ERE 
一 级 标题 二 级 标题 三 级 标题 文本 标签 文本 段落 
图 2-46 图 2-47 
水 平 线 元 件 和 垂直 线 元 件 ， 当 用 户 要 在 视觉 上 分 隔 一 些 面 板 的 时 候 ， 就 要 使 用 这 两 个 元 件 ， 如 


2-48 所 示 。 
AETH: 用 于 生成 一 个 隐形 的 但 可 点 击 的 面板 ， 使 用 它 可 以 完成 例如 为 同一 张 图 片 设 置 多 个 超 
链接 的 操作 ， 如 图 2-49 所 示 。 
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图 2-48 图 2-49 


动态 面板 元 件 : 动态 面板 元 件 是 Axure RP 中 功能 最 强大 的 元 件 ， 是 一 个 化 腐朽 为 神奇 的 元 件 。 
通过 这 个 元 件 ， 用 户 可 以 实现 很 多 其 他 原型 软件 不 能 实现 的 动态 效果 。 动 态 面板 可 以 被 简单 地 看 作 拥 
有 很 多 种 不 同 状态 的 一 个 超级 元 件 。 用 户 可 以 通过 实践 来 选择 显示 动态 面板 的 相应 状态 ， 如 图 2-50 
所 示 。 用 户 可 以 在 后 面 的 实例 中 对 动态 面板 实际 操作 一 下 。 














在 Axure RP 中 ， 动 态 面板 元 件 显示 为 淡 蓝 色 背景 ， 动 态 面板 在 默认 状态 下 会 显示 
第 一 个 状态 中 的 内 容 。 对 于 熟悉 Photoshop 的 用 户 来 说 ,动态 面板 像 是 一 个 动态 的 “图 
层 组 ”， 每 个 图 层 组 都 有 多 个 图 层 ， 而 每 个 图 层 可 以 放置 不 同 的 内 容 。 在 动态 面板 元 
件 中 包含 很 多 个 其 他 的 元 件 。 


内 联 框架 元 件 : 内 联 框架 元 件 是 人 们 常 说 的 iFrame 控件 ， 如 图 2-51 所 示 。iFrame 是 HTML 
的 一 个 控件 ， 用 于 在 一 个 页 面 中 显示 另外 一 个 页 面 。 从 Axure RP 7.0 版 本 开始 使 用 内 联 框架 元 
件 ， 可 以 应 用 任何 一 个 以 “Http://” 开 头 的 URL 所 标示 的 内 容 ， 例 如 一 张 图 片 、 一 个 网 站 、 一 个 
Flash， 只 要 能 用 URL 标示 就 可 以 了 。 

中 继 器 元件 ， 中 继 器 元 件 可 以 用 来 生成 有 重复 ltem( 条 目 ) 组 成 的 列表 页 ， 例 如 商品 列表 、 联 系 
人 列表 等 ， 并 且 可 以 非常 方便 地 通过 预先 设 定 的 事件 ， 对 列表 进行 新 增 条 目 、 删 除 条 目 、 编 辑 条 目 、 
排序 和 分 页 的 操作 ， 如 图 2-52 所 示 。 



























































等 ; 
动态 画板 内 联 框 架 中 化 器 
2-50 图 2-51 图 2-52 





文本 框 元 件 ， 这 是 一 个 在 所 有 常见 的 页 面 中 用 来 接受 用 户 输入 的 元 件 ， 但 是 仅 能 接受 单行 的 文本 
输入 ， 如 图 2-53 所 示 。 

多 行文 本 框 元 件 ， 用 于 在 页 面 中 输入 多 行文 本 ， 如 图 2-54 所 示 。 

下 拉 列 表 框 元 件 : 用 于 显示 一 些 列表 选项 , 以 便 用 户 在 其 中 选择 。 只 能 选择 , 不 能 输入 , 如 图 2-55 
所 示 。 



















































































abc] EXE [n 
文本 框 多 行文 本 框 TESE 
图 2-53 图 2-54 2-55 


IRETE 列表 框 元 件 一 般 在 页 面 中 显示 多 个 供用 户 选择 的 选项 , 并 且 人 允许 多 选 , 如 图 2756 所 示 。 
复 选 框 元 件 ， 用 于 让 用 户 从 多 个 选项 中 选择 多 个 内 容 ， 如 图 2-57 所 示 。 

单 选 按钮 元 件 ， 用 于 让 用 户 从 多 个 选项 中 单 选 其 一 ， 如 图 2-58 所 示 。 为 了 实现 单 选 按钮 效果 ， 
必须 将 多 个 单 选 按钮 同时 选中 ， 在 检视 面板 的 “指定 ( 单 选 按钮 ) 组 名 称 ” 文 本 框 中 为 其 命名 ， 才 能 


4 





移动 互联 网 之 路 一 一 AXure RP 8.0 网 站 与 APP 原型 设计 从 入 门 到 精通 




































































实现 单 选 效果 。 
是 云 按钮 元 件 ， 这 个 元 件 比较 普通 ， 没 有 额外 的 样式 可 供 选择 ， 如 图 2-59 所 示 。 

v (e) [Ey 

Di EE ge more 

图 2-56 图 2-57 图 2-58 2-59 


poser. 用 于 创建 一 个 属性 目录 ， 如 图 2-60 所 示 。 


标的 位 置 ， 并 且 元 件 的 边框 也 不 能 自 定义 格式 。 如 果 想 要 制作 更 多 效果 ， 可 以 考虑 
使 用 动态 面板 。 


表格 元 件 ， 在 页 面 上 显示 表格 数据 的 时 候 ， 最 好 使 用 表格 元 件 ， 如 图 2-61 所 示 。 


树 状 菜单 具有 一 定 的 局 限 性 ， 显 示 树 节点 上 添加 的 图 标 ， 所 有 选择 都 会 自动 添加 图 









































水 平 菜 单元 件 和 垂直 蔷 单 元 件 ; 经 典 的 横向 和 纵向 菜单 ， 如 图 2-62 所 示 。 
-— 
= 图 hl | m 
树 状 菜单 EE 水 平 荣 单 zm 
图 2-60 图 2-61 图 2-62 


在 Axure RP 8.0 默认 的 元 件 中 添加 了 新 的 标记 元 件 ， 包 括 4 种 便签 元 件 、2 种 箭头 元 件 和 2 种 
标记 元 件 等 。 下 面 逐 一 进行 介绍 。 

页 面 快照 元 件 : 将 页 面 快照 元 件 拖 彼 到 页 面 编辑 区 内 ， 双 击 弹出 引用 页 面 对 话 框 ， 选 择 一 个 页 面 
后 , 元 件 就 会 变 成 该 页 面 的 截图 , 浏览 器 预览 的 时 候 , 点 击 截图 会 跳 转 到 相应 的 页 面 , 如 图 2-63 所 示 。 
在 第 5 章 会 详细 讲解 该 元 件 的 使 用 方法 。 

JOE. ERES. 属于 标记 注释 的 样式 ， 如 图 2-64 所 示 。 
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TERE 水 平 箭头 SeA 
图 2-63 图 2-64 


便签 1、 便签 2、 便 签 3 和 便签 4 元 件 4 种 不 同 颜色 的 便签 , 以 便 用 户 在 原型 标注 中 使 用 , 如 图 2-65 
所 示 。 
圆 形 标记 和 水 滴 标记 元 件 : 提供 了 2 种 不 同形 式 的 标记 ， 如 图 2-66 所 示 。 


s E * E e ? 
便签 1 便签 2 便签 3 便签 4 圆 形 标记 KTE 
2-65 图 2-66 
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2.4.3 流程 图 元 件 


流程 图 是 一 种 不 同 于 数学 公式 的 可 视 化 的 逻辑 算法 表达 ， 使 用 了 可 视 的 形状 、 箭 头 和 文字 。 一 个 
流程 图 就 是 一 张 图 片 ， 俗 话说 “一 图 胜 过 干 言 万 语 ”， 但 只 是 看 流程 图 往往 不 那么 容易 理解 ， 实 际 还 
需要 干 言 万 语 才 能 准确 表达 清楚 一 个 复杂 流程 图 的 真正 含义 。 

在 Axure RP 8.0 的 流程 图 元 件 中 ， 除 了 一 些 常用 的 几何 形状 ， 如 作为 决策 点 的 萎 形 ， 还 有 一 些 特殊 
形状 ， 如 数据 库 、 括 弧 以 及 角色 形状 ， 如 图 2-67 所 示 。 要 对 流程 图 元 件 进 行 连接 ， 就 要 使 用 连接 线 ， 单 
击 工具 栏 中 的 Connector Tool( 连接 工具 ) 按钮 ， 即 可 对 流程 图 元 件 进行 连接 ， 完 成 效果 如 图 2-68 所 示 。 
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图 2-67 图 2-68 


ft Axure RP 中 可 以 随意 地 改变 元 件 的 形状 ， 以 实现 更 加 丰富 的 页 面 效 果 。 下 面 为 用 户 详细 讲解 
调整 方法 。 


2.5.1 转换 为 自 定义 形状 


在 页 面 编辑 区 内 拖 入 一 个 矩形 元 件 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “转换 为 自 定义 形 
状 ” 命 令 ， 进 入 图 形 锚 点 的 编辑 。 这 是 Axure RP 8.0 的 新 增 功能 ， 如 图 2-69 所 示 。 单 击 选中 图 形 ， 
行 拖 动 ， 如 图 2-70 所 示 。 
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转换 为 自 定 义 形状 ”命令 ， 如 图 2-71 所 示 。 co 局 器 
OODual 16/ 

OD]xe8- | 











直接 在 矩形 的 边框 上 单 击 ， 即 可 添加 锚 点 ， 如 图 2-72 所 示 。 按 住 Ctrl 键 不 放 ， 同 时 对 锚 点 进行 
移动 ， 则 可 得 到 对 称 的 曲线 ， 如 图 2-73 所 示 。 
























































图 2-72 图 2-73 

在 对 称 弯曲 的 曲线 旁 有 两 个 可 以 进行 曲率 调整 的 锚 
点 。 按 住 Ctrl 键 不 放 ， 可 以 单独 对 每 个 锚 点 的 位 置 进行 
调整 ， 如 图 2-74 所 示 。 

按 住 Shift 键 可 以 同时 选中 多 个 锚 点 。 选 中 锚 点 后 ， 
单 击 鼠 标 右键 , 弹出 如 图 2-75 所 示 的 菜单 。 选择 “曲线 ” 
或 者 “直线 ”命令 可 以 创建 包含 所 选 锚 点 的 曲线 条 或 者 
直线 条 。 如 图 2-76 所 示 为 将 直线 变 为 曲线 的 效果 。 


















































图 2-75 图 2-76 


如 果 要 删除 图 形 中 一 个 或 者 多 个 锚 点 ， 单 击 要 删除 的 锚 点 ， 按 住 Shift 键 添加 选择 另外 的 锚 点 ， 
jà Delete 键 或 者 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “删除 ”命令 ， 即 可 删除 锚 点 。 


2.5.2 ，” 拖 动 三 角形 调整 形状 


在 页 面 编辑 区 中 拖 昌 一 个 矩形 元 件 后 ， 拖 动 左 上 角 的 黄色 三 角形 可 以 将 矩形 调整 为 圆 角 和 矩形 ， 如 
图 2-77 所 示 。 在 检视 面板 的 “样式 ”标签 中 可 以 调整 圆 角 半径 的 数值 ， 如 图 2-78 所 示 。 


在 检视 面板 的 “样式 ”标签 中 单 击 “ 调 整 圆 角 半 径 ”按钮 地 ， 用 户 可 以 选择 调整 矩 
形 的 任意 角 的 圆 角 度数 ， 如 图 2-79 和 图 2-80 所 示 。 
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2.5.3 调整 为 Axure RP 自 带 的 形状 


在 页 面 编辑 区 中 拖 入 一 个 矩形 元 件 后 ， 单 击 右 上 角 的 灰色 圆 点 ， 在 弹出 的 面板 中 选择 其 中 的 形状 ， 
矩形 将 被 转换 为 选择 的 形状 ， 如 图 2-81 和 图 2-82 所 示 。 


I 


























移动 互联 网 之 路 一 一 AXure RP 8.0 网 站 与 APP 原型 设计 从 入 门 到 精通 





在 检视 面板 的 “属性 ”标签 中 单 击 形状 选项 的 选择 形状 ， 同 样 可 以 改变 形状 ， 转 换 效果 如 图 2-83 
所 示 。 
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图 2-83 


2.5.4 ”对 元 件 的 转换 


当选 定编 辑 某 个 图 形 或 者 元 件 时 ， 可 以 在 检视 面板 的 “属性 ”标签 中 找到 形状 选项 ， 在 形状 选项 
下 新 增加 了 对 图 形 元 件 转换 的 操作 ， 如 图 2-84 所 示 。 也 可 以 在 元 件 上 单 击 鼠 标 右键 ， 在 弹出 的 菜单 
中 选择 “改变 形状 ”命令 ， 弹 出 其 子 菜单 如 图 2-85 所 示 。 
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Flip Horizontal: 沿 着 Y 轴 将 图 形 进行 翻转 。 

Flip Vertical: 沿 着 X 轴 将 图 形 进行 翻转 。 

AH: 操作 后 的 图 形 等 于 对 前 后 两 个 图 形 取 并 集 的 结果 ， 如 图 2-86 所 示 。 

去 除 : 操作 后 的 图 形 等 于 对 前 后 两 个 图 形 取 差 集 的 结果 。 保 留 第 一 个 图 形 中 不 与 第 二 图 形 重 赤 的 
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部 分 ， 如 图 2-87 所 示 。 
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图 2-86 图 2-87 

















操作 后 的 图 形 等 于 对 前 后 两 个 图 形 取 交 集 的 结果 ， 如 图 2-88 所 示 。 
操作 后 的 图 形 等 于 前 后 两 个 图 形 的 并 集 减 去 前 后 两 个 图 形 的 交集 所 得 的 结果 。 即 只 包含 第 
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一 个 图 形 或 者 第 二 图 形 的 部 分 ， 如 图 2-89 所 示 。 
图 2-88 图 2-89 








将 多 个 图 形 合并 成 单独 的 一 个 自 定义 图 形 , 并 保留 每 个 组 成 部 分 的 原始 路 径 , 如 图 2-90 所 示 。 
结合 的 反 向 操作 ， 由 于 之 前 保留 了 每 个 组 成 部 分 原始 路 径 的 自 定义 图 形 ， 将 路 径 都 还 原 成 
以 前 的 自 定义 图 形 ， 如 图 2-91 所 示 。 


图 2-90 图 2-91 









































创建 一 个 包含 锚 点 的 曲线 形 自 定义 
创建 一 个 包含 锚 点 的 直线 形 自 定 义 


网 


形 ， 如 图 2-92 所 示 。 
形 ， 如 图 2-93 所 示 。 


图 2-92 图 2-93 
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实例 6 ” 教学 视频 : 视频 \ 第 2 章 \+ 
源 文件 ， 源 文件 \ 第 2 ENA 











制作 步骤 : 


执行 “文件 > 新建” 命令 ， 新建 一 个 项 目 文件 ， 如 图 2-94 所 示 。 将 “矩形 1” 元 件 拖 入 页 
面 编辑 区 内 ， 如 图 2-95 所 示 。 

















图 2-94 图 2-95 


调整 矩形 元 件 的 位 置 和 方向 ， 如 图 2-96 所 示 。 选 中 矩形 元 件 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜 
单 中 选择 “转换 为 自 定义 形状 ”命令 ， 如 图 2-97 所 示 。 
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用 户 可 以 选中 元 件 ， 按 住 Ctrl 键 的 同时 将 光标 移动 到 控制 点 上 ， 当 光标 变 成 时， 
按 住 鼠标 左 键 拖 鬼 ， 即 可 完成 元 件 旋转 操作 , 如 图 2-98 所 示 。 


hd 


在 矩形 元 件 的 边框 上 添加 锚 点 ， 如 图 2-99 所 示 。 拖 动 氏 点， 调整 锚 点 的 位 置 ， 如 图 2-100 
所 示 。 














2-99 图 2-100 


使 用 相同 的 方法 , 为 另 一 侧 添加 锚 点 并 调整 锚 点 的 位 置 , 效果 如 图 2-101 所 示 。 继 续 添加 锚 点 ， 
如 图 2-102 所 示 。 
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图 2-101 图 2-102 


调整 锚 点 的 位 置 , 如 图 2-103 所 示 。 选 中 衣 领 的 锚 点 , 单 击 鼠 标 右键 , 在 弹出 的 菜单 中 选择 “ 曲 
£x" dp, WE 2-104 所 示 。 


移动 互联 网 之 路 一 一 AXure RP 8.0 网 站 与 APP 原型 设计 从 入 门 到 精通 





























图 2-103 图 2-104 
效果 如 图 2-105 所 示 。 单 击 锚 点 旁 的 黄色 圆 点 ， 调 整 曲率 ， 最 终 效果 如 图 2-106 所 示 。 
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f£ Axure RP 8.0 中 新 增 了 一 个 用 于 绘制 自 定义 图 形 的 工具 一 一 钢笔 工具 。 使 用 钢笔 工具 可 以 绘 
制图 标 、 图 表 和 弯曲 的 箭头 等 各 种 图 形 。 所 绘制 的 自 定义 图 形 是 矢量 图 ， 用 户 在 制作 元 件 时 ， 可 以 使 
用 自 定义 图 形 替 换 原 先 的 图 形 ， 实 现 更 自由 的 自 定义 操作 。 


2.6.1 使 用 钢笔 工具 绘制 图 形 


单 击 工具 箱 中 的 钢笔 工具 或 者 使 用 快捷 键 Ctrl+4， 可 以 开启 自 定义 图 形 
的 绘制 。 在 页 面 编辑 区 单 击 鼠标 , 放置 自 定义 图 形 的 起 始点 , 如 图 2-107 所 示 。 
将 鼠标 移动 到 下 一 个 位 置 并 单 击 ， 在 该 位 置 添加 新 的 锚 点 ， 当 单 击 增添 一 ü 
个 新 锚 点 的 同时 , 对 其 单 击 并 进行 拖 动 , 则 会 得 到 一 条 曲线 , 如 图 2-108 所 示 。 
如 果 要 完成 这 个 图 形 的 绘制 ， 需 要 单 击 图 形 的 初始 点 。 当 鼠标 放置 在 初始 
点 位 置 时 ， 会 出 现 一 个 红色 的 矩形 ， 如 图 2-109 所 示 。 图 2-107 
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图 2-109 


如 果 要 在 开放 路 径 中 结束 绘制 ， 则 需要 按 Esc 键 或 者 双击 设计 区 域内 除了 初始 点 以 
外 的 任何 位 置 。 


2.6.2 转换 锚 点 类 型 


使 用 钢笔 工具 可 以 绘制 直线 路 径 和 曲线 路 径 ， 直 线路 径 上 的 锚 点 称 为 直线 锚 点 ， 曲 线路 径 上 的 锚 

选择 一 个 直线 锚 点 ， 如 图 2-110 所 示 。 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “曲线 ”命令 ,该 
直线 锚 点 会 转换 为 曲线 锚 点 ， 效 果 如 图 2-111 所 示 。 直 接 双击 锚 点 也 可 以 实现 直线 锚 点 和 曲线 锚 点 
的 转换 。 





图 2-110 图 2-111 | ü 
同 理 ， 选 择 “直线 ”命令 ， 可 以 将 一 个 曲线 锚 点 转换 为 直线 锚 点 。 选 择 “删除 ”命令 ， 可 将 当前 
锚 点 删除 。 








2.6.3 ”使 用 钢笔 工具 编辑 图 形 


在 图 形 绘制 完成 之 后 ， 用 户 会 退出 钢笔 工具 模式 ， 但 是 用 户 仍然 可 以 对 图 形 中 的 锚 点 进行 编辑 。 
如 果 要 绘制 另外 一 个 自 定义 图 形 ， 再 次 单 击 钢笔 工具 图 标 即 可 。 

使 用 钢笔 工具 绘制 图 形 , 如 图 2-112 所 示 。 在 路 径 上 单 击 鼠 标 , 即 可 添加 锚 点 , 如 图 2-113 所 示 。 

用 鼠标 拖 动 锚 点 可 以 调整 图 形 的 形状 ， 如 图 2-114 所 示 。 在 锚 点 旁边 有 两 个 可 以 进行 曲率 调整 
的 黄 点 ， 拖 动 黄 点 可 以 调整 曲率 ， 如 图 2-115 所 示 。 
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图 2-114 


使 用 钢笔 工具 绘制 眼睛 
实例 7 ， 教学 视频 : 视频 \ 第 2 章 \ 使 用 钢笔 工具 绘制 眼睛 .mp4 
源 文件 : 源 文件 \ 第 2 章 \ 使 用 钢笔 工具 绘制 眼睛 .rp 





制作 步骤 : 


执行 “文件 > 新建” 命令 ,新 建 一 个 项 目 文件 ， 如 图 2-116 所 示 。 在 page1 页 面 中 ,使 用 
钢笔 工具 绘制 形状 ， 如 图 2-117 所 示 。 
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图 2-116 图 2-117 


选中 绘制 的 形状 ， 单 击 形状 右上 角 灰 色 的 圆 点 ， 如 图 2-118 所 示 。 在 弹出 的 面板 中 选中 要 
改变 的 形状 ， 如 图 2-119 所 示 。 























2-118 图 2-119 


效果 如 图 2-120 所 示 。 在 “检视 : 形状 ”面板 的 “样式 ”标签 内 ， 调 整形 状 填充 的 颜色 、 
边框 粗细 和 边框 颜色 ， 如 图 2-121 所 示 。 








None 








”图 2-120 图 2-121 
调整 形状 的 位 置 和 大 小 ,效果 如 图 2-122 所 示 。 使 用 钢笔 工具 继续 绘制 形状 , 如 图 2-123 所 示 。 
使 用 相同 的 方法 为 形状 设置 样式 ， 效 果 如 图 2-124 所 示 。 将 所 绘制 的 形状 全 部 选中 ， 重 复 
复制 粘贴 ， 并 调整 其 大 小 ， 最 终 效 果 如 图 2-125 所 示 。 
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”图 2-122 图 2-123 

















图 2-124 图 2-125 
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2.7 

母 版 就 是 原来 版 本 中 的 主 部 件 面板 ， 在 Axure RP 8.0 中 称 为 母 版 ， 其 作 
用 并 没有 发 生 改 变 ， 主 要 用 来 制作 页 面 中 的 重复 区 域 ， 如 图 2-126 所 示 。 

母 版 就 是 一 些 可 以 重复 利用 的 元 件 。 例 如 ， 一 个 网 站 的 一 级 导航 会 在 多 
个 页 面 中 反复 使 用 ， 将 它们 制作 为 母 版 ， 不 但 可 以 方便 使 用 ， 而 且 可 以 方便 

2-126 


修改 。 
在 第 5 章 中 将 向 用 户 详细 介绍 母 版 的 使 用 方法 。 





页 面 编辑 区 可 以 同时 打开 多 个 原型 页 面 (多 个 Tab 标签 的 方式 ), 在 页 面 编辑 区 可 以 打开 4 种 页 面 ， 
[DEZ 
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分 别 是 基本 页 面 、 母 版 页 面 、 动 态 面板 页 面 和 中 继 器 页 面 。 
基本 页 面 : 是 页 面 面 板 中 的 各 个 页 面 ， 如 图 2-127 所 示 。 
SRRA: 是 母 版 面板 中 的 各 个 母 版 页 面 ， 如 图 2-128 所 示 。 
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图 2-127 图 2-128 


动态 面板 页 面 ， 是 动态 面板 中 的 各 个 状态 页 面 ， 如 图 2-129 所 示 。 
中 继 器 页 面 ， 是 编辑 中 继 器 的 页 面 ， 如 图 2-130 所 示 。 
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这 4 种 页 面 在 后 面 的 实例 操作 中 用 户 会 经 常 看 到 。 页 面 编辑 区 的 Tab 标签 会 显示 各 页 面 的 名 称 ， 
拖 动 Tab 标签 可 以 调整 左右 顺序 ， 如 图 2-131 所 示 。 

















EA page2 * | index * | pageg X 
o 10 20 
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单 击 页 面 编 辑 区 右 侧 的 向 下 三 角 按钮 ， 在 弹出 的 菜单 中 列 出 了 当前 打开 的 所 有 页 面 ， 以 便 快速 找 
到 所 需要 的 页 面 。 单 击 Tab 标签 上 的 关闭 图 标 即 可 关闭 当前 页 面 ， 如 图 2-132 所 示 。 


到 想 要 编辑 的 页 面 。 为 了 在 众多 的 页 面 中 快速 找到 要 编辑 的 页 面 ， 可 以 使 用 关闭 当 


C2 在 工作 过 程 中 ， 往 往 会 同时 打开 多 个 页 面 进行 编辑 ， 这 时 可 能 需要 很 长 时 间 才 能 找 
E 前 页 面 标签 之 外 的 所 有 其 他 标签 。 
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图 2-132 


2.8.1 自 适 应 视图 


为 了 满足 响应 式 Web 设计 的 需要 ， 在 页 面 编辑 区 中 提供 了 自 适 应 视图 的 功能 ， 在 自 适 应 视图 中 
可 以 定义 临界 点 ， 临 界 点 是 一 个 屏幕 尺寸 ， 当 达到 这 个 屏幕 尺寸 时 ， 界 面 的 样式 或 布局 就 会 发 生变 化 。 

在 非 响应 式 项 目 中 ,页面 基 于 某 个 特定 的 屏幕 尺寸 进行 设计 ， 如 为 桌面 屏幕 设计 或 移动 屏幕 设计 。 
当 没 有 自 适 应 视图 时 ， 对 于 已 经 为 特定 屏幕 尺寸 设计 的 页 面 ， 如果 要 再 使 用 一 个 完全 不 同 尺寸 的 屏幕 ， 
就 要 对 之 前 所 有 的 页 面 进行 重新 设计 ， 需 要 投入 大 量 的 工作 。 如 果 要 满足 更 多 不 同 尺寸 的 屏幕 ， 则 后 
续 对 所 有 不 同 屏幕 的 多 套 页 面 进行 同步 维护 ， 也 是 极 大 的 挑战 。 

自 适 应 视图 中 最 重要 的 概念 是 集成 ， 因 为 它 在 很 大 程度 上 解决 了 维护 多 套 页 面 的 效率 问题 。 其 中 ， 
每 套 页 面 都 是 为 了 一 个 特定 储存 屏幕 而 做 的 优化 设计 。 总 之 ， 在 自 适应 视图 中 的 元 件 从 父 视 图 中 修改 
样式 ( 如 位 置 、 大 小 )。 如 果 修 改 了 父 视图 中 的 按钮 颜色 ， 则 所 有 的 子 视图 中 的 按钮 颜色 也 随 之 改变 。 
但 如 果 改 变 了 子 视图 中 的 按钮 颜色 ， 则 父 视图 中 的 按钮 颜色 不 会 改变 。 

单 击 页 面 编辑 区 左上 角 的 “管理 自 适应 视图 ”图 标 副 ， 弹 出 “ 自 适 应 视图 ”对 话 框 ， 如 图 2-133 
所 示 。 单 击 左 上 角 的 “+” 按钮, 即 可 添加 一 种 新 视图 , 新 视图 的 各 项 参数 可 以 在 右 侧 添加 , 如 图 2-134 
所 示 。 
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图 2-133 图 2-134 


mS: 根据 宽度 预先 定义 好 了 一 个 设备 的 显示 尺寸 ， 用 户 可 以 直接 选中 。 

名 称 : 为 当前 自 适应 视图 定义 一 个 名 称 。 

F: 定义 临界 点 的 逻辑 关系 。 例 如 ， 当 视图 宽度 小 于 临界 点 尺寸 时 ， 则 使 用 当前 视图 。 
E: 如 果 要 自 定义 一 个 视图 ， 则 可 以 输入 一 个 宽度 。 

高 : 如 果 要 自 定 义 一 个 视图 ， 则 可 以 输入 一 个 高 度 。 

继承 于 : 为 当前 视图 指定 一 个 父 视图 ， 即 确定 继承 的 父 视图 。 
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要 创建 自 适应 页 面 , 必须 要 从 某 个 页 面 的 视图 中 来 创建 , 这 个 目标 视图 称 为 基本 视图 。 

















添加 自 适 应 视图 
教学 视频 视频 \ 第 2 章 \ 添 加 自 适应 视图 .mp4 








实例 8 


源 文件 : 源 文件 \ 第 2 章 \ 添 加 自 适应 视图 .rp 





实例 分 析 : 

自 适 应 视图 可 以 将 绘制 
的 原型 应 用 到 各 种 尺寸 的 界面 
中 ， 本 实例 设置 了 5 种 尺寸 ， 
将 绘制 的 内 容 自 适应 到 5 种 
尺寸 的 界面 中 ， 显 示 不 同 的 
效果 。 





制作 步骤 : 


执行 “文件 > 新 建 命 令 , 新 建 一 个 项 目 文件 ,如 图 2-135 所 示 。 分 别 从 元 件 面板 中 将 矩形 元 件 、 
2-136 所 示 。 




















图 2-135 2-136 


单 击 “ 管 理 自 适应 视图 ”按钮 ， 如 图 2-137 所 示 。 弹 出 “ 自 适应 视图 ”对 话 框 ， 如 图 2-138 
所 示 。 

单 击 “ 添 加 ”按钮 ， 修 改 “ 名 称 ” 为 “手机 纵 <=320”， 其 他 参数 如 图 2-139 所 示 。 继 续 
设 定 视图 ， 完 成 效果 如 图 2-140 所 示 。 
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图 2-139 图 2-140 


通常 情况 下 ， 会 考虑 网 页 、 手 机 纵 、 手 机 横 、 平 板 纵 和 平板 横 5 种 情况 ， 以 保证 原 
型 在 大 多 数 终端 可 以 正常 显示 。 


单 击 “ 确 定 ”按钮 ， 在 页 面 编辑 区 顶部 显示 不 同 视图 的 标签 ， 如 图 2-141 所 示 。 分 别 选择 
同 的 视图 标签 ， 调 整 页 面 显示 效果 ， 如 图 2-142 所 示 。 使 得 内 容 适 应 不 同 尺寸 的 页 面 显示 。 
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2-141 图 2-142 


在 修改 不 同 视图 尺寸 中 的 对 象 显示 效果 时 ， 如 果 勾 选 了 “影响 所 有 视图 ”选项 ， 则 
修改 对 象 时 会 影响 全 部 的 视图 效果 。 
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05-4 单 击 工具 栏 上 的 “预览 ”按钮 ， 拖 动 浏览 器 边框 改变 浏览 器 视图 大 小 ， 预 览 页 面 在 不 同 页 面 
尺寸 下 的 效果 ， 如 图 2-143 所 示 。 











2.8.2 标尺 


页 面 编辑 区 默认 会 显示 标尺 ， 标 尺 的 单位 是 像素 ， 如 果 设计 师 要 针对 
1024x768 的 显示 器 开发 网 站 ， 网 站 页 面 的 宽度 不 能 超过 1024， 否 则 将 | 
无 法 完全 显示 。 页 面 编辑 区 的 原点 就 是 左上 角 ， 这 里 的 坐标 是 X0、Y0， 
如 图 2-144 所 示 。 
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ft Axure RP 8.0 中 ， 按 照 辅助 线 功 能 的 不 同 可 分 为 全 局 辅助 线 、 页 
面 辅助 线 、 自 适应 视图 辅助 线 和 打印 辅助 线 。 图 2-144 

1. 全 局 辅助 线 

全 局 辅助 线 全 局 作用 于 站 点 中 的 所 有 页 面 ， 包 括 新 建 页 面 。 将 光标 移动 到 标尺 上 ， 按 住 Ctrl 键 的 
同时 向 外 拖 撮 ， 即 可 创建 全 局 辅助 线 。 默 认 情况 下 ， 全 局 辅助 线 为 紫红 色 ， 如 图 2-145 所 示 。 

2. 页 面 辅助 线 

将 鼠标 光标 移动 到 标尺 上 向 外 拖 折 创建 辅助 线 ， 这 种 辅助 线 称 为 页 面 辅助 线 。 页 面 辅助 线 只 作用 
于 当前 页 面 。 默 认 情况 下 ， 页 面 辅助 线 为 青色 ， 如 图 2-146 Pim. 

3. 自 适 应 视图 辅助 线 

该 辅助 线 主要 在 前 面 讲解 的 自 适应 视图 中 使 用 ， 只 有 在 自 适 用 视图 页 面 中 才能 显示 ， 在 普通 页 面 
中 不 显示 ， 如 图 2-147 所 示 。 

在 勾 选 自 适应 视图 辅助 线 的 情况 下 会 显示 ， 当 选择 320 尺寸 视图 时 ， 显 示 辅 助 线 ， 如 图 2-148 
所 示 。 当 选择 480 尺寸 视图 时 ， 显 示 辅 助 线 ， 如 图 2-149 所 示 。 当 选择 560 尺寸 视图 时 ， 显 示 辅助 
线 ， 如 图 2-150 所 示 。 
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图 2-145 2-146 图 2-147 


自 适 应 视图 辅助 线 只 显示 在 自 适用 视图 中 ， 起 到 提示 作用 ， 提 示 设 计 师 要 在 自 适 应 视图 的 范围 内 
绘制 原型 。 
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图 2-148 图 2-149 图 2-150 


4. 打印 辅助 线 


打印 辅助 线 将 方便 用 户 准确 地 观察 页 面 效果 ， 正 确 打印 页 面 。 当 用 户 设置 了 纸张 尺寸 后 ， 页 面 中 
会 显示 打印 辅助 线 。 默 认 情 况 下 ， 打 印 辅助 线 为 灰色 ， 如 图 2-151 所 示 。 
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2.8.4 ”创建 辅助 线 


执行 “布局 > 栅 格 和 辅助 线 > 创建 辅助 线 ” 命令 (如 图 2-152 所 示 ), 弹出 “创建 辅助 线 ” 对 话 框 ， 
如 图 2-153 所 示 。 
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| 许 层 显示 辅助 线 inge 10 边 距 0 
| 锁定 辅助 线 <L> Ctrl+Shift+. 
ARAME <C> [v 创建 为 全 局 畏 助 绪 m xx 
Bienne D. 
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在 Axure RP 中 创建 辅助 线 是 按照 分 栏 的 模式 来 考虑 的 。 例 如 ， 熟 悉 网 站 设计 的 人 会 知道 ， 一 般 
网 站 有 双 栏 模式 、3 栏 模式 和 4 栏 模式 ， 甚 至 更 多 。 所 以 辅助 线 也 是 这 样 考虑 的 。 

1. 辅助 线 预 设 

在 “创建 辅助 线 ” 对 话 框 中 ， 单 击 “ 预 设 ” 下 拉 菜 单 ， 如 图 2-154 所 示 。 

960Grid:12Column: 宽度 为 960 的 12 列 的 布局 。 

960Grid:16Column: 宽度 为 960 的 16 列 的 布局 。 

1200Grid:12Column: 宽度 为 1200 的 12 列 的 布局 。 

1200Grid:15Column: 宽度 为 1200 的 15 列 的 布局 。 

当选 择 这 些 预 设 选项 时 ，Axure RP 会 按照 选择 的 参数 自动 创建 辅助 线 。 如 果 勾 选 “ 创 建 为 全 局 
辅助 线 ” 复 选 框 ， 该 辅助 线 将 出 现在 所 有 的 页 面 上 。 如 果 没 有 勾 选 该 复 选 框 ， 那 么 辅助 线 就 仅 出 现在 
当前 页 面 上 。 

2. 辅助 线 其 他 参数 设置 

在 “创建 辅助 线 ” 对 话 框 中 ， 不 仅 可 以 选择 预 设 选项 ， 还 可 以 根据 自己 的 想法 设置 辅助 线 。 例 如 ， 
创建 一 个 一 共有 4 列 ， 每 列 宽 为 60， 列 与 列 间距 宽度 为 20， 边 距 为 10， 行 数 为 2， 行 高 为 40， 行 
与 行 间距 高 度 为 20 的 全 局 辅助 线 ， 如 图 2-155 所 示 。 
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960 Grid: 16 Column 
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图 2-155 




















助 线 ， 而 不 是 全 局 辅助 线 。 全 局 辅助 线 非常 有 用 ， 它 可 以 保证 在 每 个 页 面 上 创建 的 
元 素 的 位 置 都 是 正确 的 。 

创建 的 辅助 线 效果 如 图 2-156 所 示 。 

3. 删除 辅助 线 

在 上 一 节 中 创建 了 12 条 辅助 线 ， 如 果 只 想 创建 1 条 全 局 辅助 线 怎么 办 ? 很 简单 ， 可 以 把 列 数 设 


置 为 1， 把 创建 出 来 的 3 条 辅助 线 删除 2 条 即 可 。 删 除 辅助 线 的 操作 很 简单 ， 在 辅助 线 上 单 击 鼠标 右 
键 ， 在 弹出 的 菜单 中 选择 “删除 ”命令 ， 如 图 2-157 所 示 。 


注意 一 定 要 勾 选 “创建 为 全 局 辅助 线 ” 复 选 框 ， 否 则 创建 出 来 的 辅助 线 就 是 页 面 畏 
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8 20 像素 的 间距 高 度 


A 60 像 素 的 列 宽 
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图 2-156 图 2-157 


在 锁定 辅助 线 的 情况 下 是 不 能 删除 辅助 线 的 ， 只 有 解锁 辅助 线 才能 删除 。 为 了 防止 
在 工作 中 意外 地 选中 删除 辅助 线 ， 建 议 还 是 将 辅助 线 锁定 。 
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| 
如 果 仅 是 创建 一 个 当前 页 面 的 畏 
助 线 ， 只 要 将 光标 放 在 标尺 上 进行 拖 
粤 即 可 ， 可 以 拖 出 青 蓝 色 的 辅助 线 ， 
它 仅 用 于 当前 页 面 , 如 图 2-158 所 示 。 [ 
而 全 局 辅助 线 是 紫红 色 的 。 ' 
图 2-158 


创建 辅助 线 
[cra 
实例 9” emm 2S ERE mp4 




















制作 步骤 : 


执行 “文件 > 新 建 ”命令 ， 新 建 一 个 项 目 文件 ， 如 图 2-159 所 示 。 执 行 “布局 > 栅 格 和 辅 
命令 ， 如 图 2-160 所 示 。 
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弹出 “创建 辅助 线 ” 对 话 框 ， 设 置 参数 如 图 2-161 所 示 。 单 击 “ 确 定 ”按钮 ， 页 面 编辑 区 
效果 如 图 2-162 所 示 。 
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xe: 10 ie: 0 

[v 创建 为 全 局 辅助 线 

[a | m» | | 
图 2-161 图 2-162 


将 鼠标 移动 到 标尺 位 置 ， 根 据 自 己 的 需要 拖 出 辅助 线 ， 如 图 2-163 所 示 。 


文件 <F> WEE 视图 <V> 项 目 <P> 方 局 <A> 发 布 <1> 团队 <T> 帮助 <H> 
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图 2-163 


2.8.5 ”设置 辅助 线 


为 了 方便 使 用 辅助 线 , Axure RP 8.0 允许 用 户 为 不 同 种 类 的 辅助 线 指定 不 同 的 颜色 。 执行 “ 布 
局 > 栅 格 和 辅助 线 > 辅助 线 设置 ”命令 或 在 页 面 中 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “ 栅 格 和 辅 
助 线 > 辅助 线 设置 ”命令 ， 弹 出 如 图 2-164 所 示 的 对 话 框 。 

在 该 对 话 框 中 , 用 户 除了 可 以 选择 显示 或 隐藏 辅 助 线 外 , 还 可 以 设 定 不 同 辅助 线 的 样式 , 如 图 2-165 
所 示 。 
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2.8.6 ”使 用 网 格 


网 格 也 是 非常 有 用 的 功能 ， 在 默认 的 情况 下 网 格 是 隐藏 的 ， 显 示 网 格 的 方法 有 两 种 。 

在 页 面 编辑 区 中 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “ 栅 格 和 辅助 线 > 显示 网 格 ” 命 令 ， 即 可 显 
示 网 格 ， 如 图 2-166 所 示 。 

执行 “布局 > 栅 格 和 辅助 线 > 显示 网 格 ” 命 令 ， 即 可 显示 网 格 ， 如 图 2-167 所 示 。 
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2-166 图 2-167 
流程 图 页 面 中 显示 网 格 的 效果 如 图 2-168 所 示 。 
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图 2-168 


在 Axure RP 8.0 中 ,将 原来 版 本 中 的 部 件 交 互 与 注释 、 部 件 属性 与 样式 、 页 面 属性 3 个 面板 进 
行 了 合并 ， 合 并 为 检视 面板 ， 如 图 2-169 所 示 。 在 检视 面板 中 分 为 “属性 ”标签 和 “样式 ”标签 。 
在 检视 面板 中 既 可 以 检视 页 面 ， 也 可 以 检视 元 件 。 
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2.9.1 检视 页 面 的 属性 标签 


当 处 于 “检视 : 页 面 " 面板 时 , 属性 标签 中 可 以 设置 页 面 级 别 的 交互 及 页 面 说 明 , 如 图 2-170 所 示 。 

1. 交互 

为 页 面 或 模板 创建 常见 的 交互 动画 ， 类 似 于 为 元 件 创建 交互 。 页 面 交 互 包 括 如 图 2-171 所 示 的 
几 种 事件 。 

具体 事件 的 使 用 方法 ， 将 在 后 面 章 节 向 用 户 详细 讲解 。 

2. 页 面 说 明 

用 于 对 页 面 或 模板 进行 注释 说 明 ， 只 要 在 备注 区 输入 文字 即 可 ， 如 图 2-172 所 示 。 
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图 2-170 图 2-171 图 2-172 


在 Axure RP 中 ， 可 以 同时 进行 页 面 的 设计 和 说 明 。 在 “页 面 说 明 ” 选 项 中 ， 可 以 填写 当前 页 面 
的 相关 信息 。 例 如 ， 页 面 的 描述 、 页 面 的 进入 点 和 退出 点 、 页 面 大 小 和 限制 条 件 。 


页 面 说 明 主要 和 生成 UI 规格 文档 或 HTML 原型 注释 有 关 。 在 团队 交流 重要 的 页 面 
信息 或 交接 工作 时 ， 页 面 说 明 也 是 非常 有 用 的 。 


Axure RP 可 以 对 页 面 说 明 进 行 分 类 管理 ， 使 得 生成 的 文档 更 加 清晰 和 条 理 。 默 认 只 有 一 个 说 明 分 类 ， 
在 这 里 可 以 输入 所 有 相关 的 页 面 信息 。 也 可 以 添加 多 个 说 明 分 类 ， 让 每 个 分 类 对 应 一 个 特定 受众 或 目的 。 


项 目 采 用 哪 种 页 面 说 明 处 理 方式 ， 取 决 于 项 目的 复杂 程度 和 利益 相关 者 的 期 望 值 。 
最 好 是 提前 和 文档 受众 讨论 需求 和 期 望 ， 以 确保 文档 让 所 有 人 收益 。 
单 击 向 下 三 角形 按钮 ， 弹 出 下 拉 菜 单 , 如 图 2-173 所 示 。 选择 “ 自 定义 页 面 字段 ” 命令, 弹出 “页 
面 说 明 字段 ”对 话 框 ， 如 图 2-174 所 示 。 
单 击 “ 页 面 说 明 字 段 ” 对 话 框 中 的 “添加 ”按钮 ， 即 可 添加 新 增 字 段 ， 在 “页 面 说 明 字段 ”对 话 
框 中 还 可 以 重 命名 和 删除 页 面 说 明 的 分 类 ， 如 图 2-175 所 示 。 
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图 2-173 图 2-174 图 2-175 


使 用 一 个 页 面 说 明 的 优点 是 简单 ， 而 缺点 是 利益 相关 者 可 能 很 难 找到 所 需要 的 信息 。 
多 数 文档 的 受众 只 会 对 某 些 说 明 部 分 感 兴趣 。 
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Axure RP 还 可 以 控制 哪些 人 看 到 哪些 说 明 分 类 ， 所 以 强烈 建议 利用 好 页 面 说明 功 能 。 通 常会 将 


页 面 说 明 分 为 下 面 几 类 。 


。 ”内 部 团队 记录 ( 评审 问题 、 问 题记 录 和 后 续 计 划 等 ) 。 
个 性 化 、 本 地 化 或 例外 说 明 。 

UX 描述 。 

所 参考 的 业务 需求 文档 。 

可 访问 性 说 明 。 

用 户 也 可 以 使 用 Axure RP 对 页 面 说 明 的 以 下 方面 进行 控制 。 
。 说明 区 块 的 顺序 。 

输出 时 包含 哪些 说 明 区 块 。 

是 否 在 Word/PDF 规格 文档 中 包含 说 明 。 

是 否 在 HTML 原型 中 包含 说 明 。 

说 明 区 块 的 标题 ( 分 类 名 称 )。 


在 共享 项 目 中 ， 添 加 一 个 说 明 分 类 后 ， 会 被 所 有 人 员 看 到 。 如 果 要 求 所 有 人 都 对 某 


一 个 说 明 分 类 进行 填写 ， 最 好 事先 进行 沟通 。 


2.9.2 ”检视 页 面 的 样式 标签 


页 面 样式 只 能 应 用 在 页 面 元 件 上 , 不 能 应 用 在 母 版 页 面 或 动态 面板 的 状态 页 面 上 。 在 页 面 的 “样式 ” 


标签 下 可 以 定义 样式 的 属性 ， 如 图 2-176 所 示 。 


页 面 排 列 ， 用 于 设置 输出 时 页 面 的 排列 方式 ， 用 户 可 以 选择 居 左 或 者 居中 。 
SRG: 用 于 设置 页 面 的 背景 颜色 。 


SRAKA: 用 于 设置 页 面 的 背景 图 片 。 单 击 “ 导 入 ”按钮 ， 选 择 相应 的 背景 图 片 即 可 。 
fias "清空 "按钮 , 可 以 将 背景 图 片 删除 。 用 户 可 以 设置 背景 图 片 的 重复 方式 和 位 置 , 如 图 2-177 所 示 。 
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草图 / 页 面 效 果 : 参数 是 针对 页 面 上 的 元 件 的 。 拖 动 草图 控制 轴 ， 可 以 实现 不 同 级 别 的 页 面 效 果 ， 
如 图 2-178 所 示 。 








网 





























s» JU 100 v 
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字体 系列 : 使 整个 页 面 字体 转换 为 一 种 字体 ， 以 便 观 察 页 面 草图 的 效果 。 
[o]e 过 按钮 ;选择 3 种 不 同 的 线条 粗细 来 显示 草图 ， 如 图 2-180 所 示 。 
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2.9.3 ”检视 元 件 的 属性 标签 


当 在 页 面 编辑 区 中 拖 入 一 个 矩形 元 件 , 使 其 处 于 选中 状态 时 , 检视 面板 显示 效果 如 图 2-181 所 示 。 
此 时 检视 面板 为 “检视 : 矩形 ”面板 ， 也 就 是 说 在 Axure RP 8.0 中 ， 检 视 面板 既 可 以 检视 页 面 ， 
又 可 以 检视 元 件 。 单 击 检视 面板 右上 角 的 5 按钮 ， 即 可 进行 切换 。 
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在 检视 元 件 时 ， 元 件 的 事件 支持 复制 和 粘贴 。 也 就 是 可 以 把 元 件 1 的 事件 内 容 复 制 
到 元 件 2 的 事件 里 面 去 。 该 功能 在 创建 多 个 同样 的 事件 时 非常 有 用 。 























在 检视 元 件 时 ， 属 性 标签 可 以 管理 一 个 元 件 的 事件 ( 完整 - 
的 事件 列表 在 后 面 的 章节 会 详细 讲解 ) ,还 可 以 对 元 件 进行 说 明 。 z 
元 件 的 说 明 只 有 一 组 默认 说 明 ， 同 样 也 可 以 自 定义 说 明 。 常 见 | C07 
的 元 件 说 明 有 文本 型 、 列 表 型 、 数 字 型 和 日 期 型 。 p mes 
文本 型 ， 在 进行 文字 描述 或 默认 值 说 明 时 ， 就 可 以 使 用 文 "t ie 
本 类 型 的 字段 ， 用 户 可 以 输入 任意 数量 的 文本 。 2E 
列表 型 ， 尽 可 能 多 地 使 用 这 种 类 型 的 字段 属性 ， 如 状态 、 S RUE 
发 布 版 本 等 ， 以 确保 属性 值 的 一 致 性 ， 节 省 输入 时 间 。 = 
数字 型 说 明 属 性 值 是 一 个 个 数值 时 ,就 可 以 使 用 这 种 类 型 。 
对 于 一 般 的 属性 ， 如 版 本 、 发 布 号 ， 使 用 列表 类 型 可 能 更 合适 。 | < 
期 型 ， 用 于 描述 日 期 的 属性 。 aae [OF 
在 说 明 选 项 下 单 击 向 下 三 角形 按钮 (如 图 2-182 所 示 ), A» 
在 下 拉 菜 单 中 选择 “ 自 定义 元 件 字段 ”命令 ， 弹 出 “元 件 说 明 | ™ 
字段 与 配置 ” 对 话 框 , 如 图 2-183 所 示 。 000000000000 mmm TET 
jE 元 休 说 明 闻 县 与 三重 x 
[*& | ER 
BERE mE 选项 列表 
添加 o. 输入 值 每 行 一 
FR zm 
说 明 Text 
[We | 
图 2-183 





在 “元 件 说 明 字段 与 配置 ”对 话 框 中 可 以 管理 元 件 说 明 字段 ， 如 图 2-184 所 示 。 
如 果 说 明 字 段 的 数量 很 多 ， 则 说 明 字段 的 查看 和 编辑 不 太 方便 。 在 “元 件 说 明 字 段 与 配置 ”对 话 
框 中 有 “配置 ”选项 。Axure RP 提供 了 一 个 很 实用 的 功能 ， 将 说 明 进 行 配置 分 组 ， 可 以 将 说 明 字符 


配置 成 多 个 组 ， 以 便 查看 和 输入 ， 如 图 2-185 所 示 。 
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添加 



































六 元 = 
BEXER FREE : New Set. 
* x mmo. 
New Set FR ER 
C» jJ 
图 2-184 图 2-185 


2.0.4 ”检视 元 件 的 样式 标签 


每 个 元 件 都 有 自己 的 样式 和 特征 ， 在 Axure RP 8.0 中 添加 了 新 的 元 件 样式 ， 常 见 的 元 件 样式 如 
表 2-1 所 示 ， 重 点 向 用 户 讲解 其 中 的 元 件 样式 及 对 齐 和 间距 。 


表 2-1 常见 的 元 件 样式 


因为 说 明 字段 和 配置 组 无 法 根据 所 选 元 件 进行 自动 切换 ， 而 是 需要 进行 手动 切换 ， 
所 以 在 输入 说 明 时 ， 要 确保 当前 的 说 明 字段 配置 和 字段 是 正确 的 。 


名 称 Label 。 用 来 标示 元 件 的 名 称 ， 在 AXUre RP 中 元 件 名 称 并 不 是 唯 


位 置 


尺寸 


旋转 角度 
默认 元 件 样式 


一 的 。 也 就 是 说 ， 在 页 面 中 可 以 同时 有 两 个 元 件 都 叫 用 户 
名 称 


用 于 确定 元 件 在 页 面 中 的 位 置 ， 页 面 的 坐标 以 左上 角 
X0: Y0 为 标准 

元 件 本 身 的 尺寸 ， 大 部 分 元 件 都 是 可 以 设 定 尺寸 的 ， 如 图 
片 元 件 。 有 些 元 件 是 不 可 以 设 定 尺寸 的 ， 如 文本 元 件 的 高 
度 就 是 不 可 以 设 定 的 。 它 的 高 度 会 随 着 元 件 的 字体 大 小 自 
动 调整 

元 件 的 旋转 角度 

可 以 在 元 件 编辑 区 中 对 元 件 样式 进行 添加 和 编辑 。 在 


Axure RP 8.0 中 增加 了 另 一 种 快捷 的 方式 添加 和 编辑 
样式 


X 160 Y 270 


w 300 H 170 


Ro To 


Text Field” 
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( 续 表 ) 


属性 名 称 属性 说 明 属性 举例 


填充 颜色 填充 元 件 的 颜色 ， 如 矩形 元 件 


阴影 阴影 可 以 让 设计 感 更 加 强烈 ， 分 为 外 部 阴影 和 内 部 阴影 两 .m= E 
种 。 在 阴影 面板 中 还 可 以 设置 阴影 的 偏 移 、 模 糊 和 颜色 | 


线 宽 元 件 所 具有 的 线段 的 粗细 


线段 颜色 元 件 所 具有 的 线段 的 颜色 


线段 类 型 线段 的 样式 ， 是 实 线 还 是 虚线 


锁定 线段 选择 元 件 中 的 线段 进行 编辑 


箭头 样式 可 以 更 改 箭头 的 样式 





圆 角 半径 改变 圆 角 的 圆 角 半径 及 修改 单一 圆 角 的 角度 -me 加 
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(BER) 
不 透明 度 。 改变 元 件 的 不 透明 度 z = 
字体 元 件 所 使 用 的 显示 字体 ， 并 非 所 有 元 件 都 有 ， 文 字 相关 的 - 
元 件 才 有 m 
字体 大 小 字体 的 尺寸 大 小 s. 
字体 样式 。 黑体 、 和 斜体 和 下 划 线 INDE 


字体 对 齐 左 对 齐 、 居 中 对 齐 、 右 对 齐 、 上 对 齐 、 下 对 齐 和 中 间 对 齐 


字体 颜色 字体 的 颜色 


1. 修改 元 件 样 式 的 两 种 方法 





通过 元 件 样式 标签 ， 对 所 选 元 件 的 样式 分 别 进行 修改 。 用 户 可 以 通过 样式 工具 栏 和 鼠标 右键 来 完 
成 元 件 样式 标签 。 此 时 ， 如 果 要 对 多 个 元 件 使 用 相同 样式 ， 这 种 方法 会 降低 效率 。 
元 件 设置 好 样式 以 后 ， 将 该 样式 也 指定 给 其 他 多 个 元 件 。 此 时 ， 可 以 通过 概要 面板 将 样式 应 用 到 


所 选 的 元 件 上 。 这 种 方法 能 确保 整体 效果 视觉 的 一 致 性 。 
2. 默认 样式 


所 有 元 件 都 有 一 个 默认 样式 。 根 据 项 目的 需要 ， 用 户 可 能 需要 一 种 不 同 的 默认 样式 ， 或 者 添加 新 
的 样式 ， 用 户 可 以 管理 元 件 的 默认 样式 ， 在 Axure RP 8.0 中 新 增加 了 很 多 样式 ， 如 图 2-186 所 示 。 


选择 要 管理 的 样式 ， 单 击 “ 管 理 元 件 样式 ”按钮 ， 如 图 2-187 所 示 。 



































图 2-186 图 


弹出 “元 件 样式 编辑 ”对 话 框 ， 如 图 2-188 所 示 。 
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样式 属性 











复制 样式 





添加 元 件 样式 ， 创建 新 的 样式 标签 。 








重复 元 件 样式 : 复制 已 有 的 元 件 样式 。 


清除 元 件 样式 ， 将 创建 的 样式 标签 格式 化 。 





句 上 移动 : 











样式 列表 : 


样式 属性 : 
复制 样式 : 


件 样式 中 。 


句 下 移动 : 


向 上 移动 元 件 样式 的 位 置 。 

向 下 移动 元 件 样式 的 位 置 。 

在 样式 列表 中 排列 着 全 部 的 元 件 样式 。 

为 元 件 设置 不 同 的 属性 。 

当 添 加 新 的 元 件 样式 时 ， 单 击 “ 复 制 ”按钮 ， 可 以 将 设置 好 的 样式 属性 复制 到 新 的 元 


实例 ETHER 
1 0 教学 视频 : 视频 \ 第 2 章 \ 新 建 元 件 样式 .mp4 — 源 文件 : 无 





* 900 emen 





一 一 一 - 5 
z 
一 级 标题 
二 级 标题 
E 

E 


2355 


TREE 
人 


第 2 章 Axure RP 的 工作 环境 
制作 步骤 : 


执行 “文件 > 新 建 ”命令 , 新建 一 个 项 目 文件 ， 如 图 2-189 所 示 。 将 矩形 1 元 件 拖 入 页 面 
编辑 区 内 ， 如 图 2-190 所 示 。 


LICET 










































2-189 


单 击 “ 检 视 : 矩形 ”面板 中 的 “管理 元 件 样式 ”按钮 , 如 图 2-191 所 示 。 弹出 “元 件 样式 编辑 ” 

对 话 框 ， 如 图 2-192 所 示 。 

在 “元 件 样式 编辑 ”对 话 框 中 单 击 “添加 ”按钮 ， 添 加 新 的 样式 并 命名 为 底 图 ， 如 图 2-193 

所 示 。 在 样式 属性 中 设置 样式 ， 如 图 2-194 所 示 。 

单 击 “确定 ”按钮 ， 完 成 元 件 样式 的 创建 。 在 “样式 ”标签 的 元 件 样式 下 拉 菜 单 中 即 可 看 到 

新 添加 的 元 件 样式 ， 如 图 2-195 所 示 ， 效 果 如 图 2-196 所 示 。 
izt esce 


Normal 
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以 方便 后 续 新 样式 的 修改 和 维护 。 为 新 元 件 / 页 面 样式 取 个 好 名 字 ， 让 其 他 人 能 够 明 


国 最 好 在 项 目 开始 时 就 建立 新 元 件 / 页 面 样式 ， 培 养 使 用 新 元 件 / 页 面 样式 的 好 习惯 ， 
" 白 新 样式 的 作用 。 


3. 对 齐 和 间距 

用 户 有 时 需要 对 齐 页 面 中 的 元 件 或 调整 文本 的 间距 ， 实 现 正 确 而 美观 的 页 面 效 果 。 可 以 通过 
Axure RP 的 对 齐 和 间距 功能 实现 页 面 的 排列 。 对 齐 、 间 距 和 字体 的 属性 紧密 相关 ， 可 以 起 到 对 元 件 
中 文本 属性 的 控制 作用 。 当 元 件 的 文本 发 生动 态 改变 时 ， 对 齐 和 间距 非常 实用 。 


Qe 
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Axure RP 中 的 行 间距 类 似 于 CSS 中 的 Line-height， 用 于 定义 每 行文 字 的 行 间距 。 在 Pho- 
toshop 和 Illustrator 中 也 有 相似 的 功能 。 


原来 的 元 件 管理 器 被 重 命名 为 概要 面板 ， 可 以 对 页 面 中 所 有 的 动态 面板 进行 概览 和 管理 ， 如 
2-197 所 示 。 
过 渡 功 能 : 使 用 元 件 过 滤 功 能 可 以 仅 显 示 某 个 种 类 的 元 件 ， 如 图 2-198 所 示 。 














vox Outline: 页 面 了 | g 查找 
Lese E 
d Can v 显示 所 有 的 元 件 
E snars ES) = 
Oma 过 滤 功能 REGES 
D "sen 只 显示 母 版 
4d REIRE GSN m 只 显示 动态 面板 和 母 版 
a med v 显示 命名 与 未 命名 元 件 
Ad AEREA emn) E 只 显示 已 命名 元 件 
am n v 显示 可 见 和 不 可 见 元 件 
4u Ap = 只 显示 可 见 元 件 
tid 只 显示 不 可 见 元 件 
一 0) 
图 2-197 图 2-198 


查找 : 快速 查找 页 面 编辑 区 内 的 元 件 。 

概要 面板 中 会 显示 当前 页 面 中 使 用 的 所 有 动态 面板 和 每 个 动态 面板 的 状态 。 有 时 复杂 的 页 面 有 
很 多 元 件 ， 这 时 用 户 可 以 选择 暂时 先 将 部 分 动态 面板 元 件 隐 藏 ， 以 使 编辑 区 看 起 来 更 加 干净 。 熟 悉 
Photoshop 的 用 户 应 该 了 解 其 图 层面 板 的 使 用 ， 这 里 的 隐藏 功能 和 Photoshop 图 层 中 的 隐藏 功能 
是 一 样 的 ， 只 要 单 击 动 态 面 板 元 件 右 侧 的 蓝 色 小 方 框 就 可 以 了 ， 如 图 2-199 所 示 。 

在 概要 面板 中 还 可 以 为 动态 面板 添加 状态 ， 将 光标 移动 到 动态 面板 选项 下 ， 右 侧 会 显示 出 “添加 
状态 ”按钮 , 还 可 以 复制 一 个 动态 面板 的 状态 , 将 光标 移动 到 某 状态 选项 下 , 右 侧 会 显示 出 “复制 状态 ” 
按钮 ， 如 图 2-200 所 示 。 


Outine: 页面 nh Outine: 页 面 YQ Outine: 页 面 ee 





[ Home 
4g EERE (动态 面板 ) 
4a HERE [semen] 
4d EREA (动态 面 板 ) DL 
4 am X 
4d WUEFUETUSETU GnbH(w 
aam FE 
45 RUBTUEIREDÉOESE (35508 
4m Yn 
4 dp DESEE 动态 面板 ) m 
4 aw state1 
4 gp 添加 朋友 内 容 (动态 面板 ) wW ~ 
B m , 


2-199 


























移动 互联 网 之 路 一 一 AXure RP 8.0 网 站 与 APP 原型 设计 从 入 门 到 精通 





在 概要 面板 中 还 可 以 调整 位 置 ， 选 中 要 移动 的 动态 面板 或 其 他 元 件 选项 ， 如 图 2-201 所 示 。 向 
上 移动 或 者 向 下 移动 会 出 现 蓝 色 带 圆圈 的 线段 ， 如 图 2-202 所 示 。 

松 开 鼠 标 即 可 移动 动态 面板 或 其 他 元 件 的 位 置 ， 如 图 2-203 所 示 。 选 中 其 中 的 动态 面板 ， 单 击 
鼠标 右键 ， 通 过 选择 弹出 菜单 中 的 命令 可 以 对 动态 面板 进行 编辑 ， 如 图 2-204 所 示 。 
Outline: 页 面 TA Outline: 页 面 YA 
A GBE) ^ a 
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Axure RP 支持 3 种 文件 格式 一 一 RP 文件 格式 、RPPRJ 文件 格式 和 RPLIB 自 定义 控制 库 模式 ， 
不 同 的 文件 格式 有 不 同 的 使 用 方式 。 


2.11.1 保存 文件 的 方法 


1. 保存 文件 

执行 “文件 > 保存 ”命令 , 如 图 2-205 所 示 ， 弹 出 “另存 为 ”对 话 框 ， 在 其 中 输入 文件 名 ， 选 
择 保 存 类 型 后 ， 单 击 “保存 ”按钮 ， 即 可 完成 文件 的 保存 操作 。 在 制作 原型 的 过 程 中 ， 一 定 要 做 到 经 
常 保存 文件 ， 避 免 由 于 系统 错误 或 软件 错误 导致 软件 意外 关闭 ， 造 成 不 必要 的 损失 。 

2. 另存 为 文件 

当前 文件 已 经 保存 过 了 , 再 执行 “文件 > 另存 为 ”命令 , 即 可 弹出 “另存 为 ”对 话 框 ， 如 图 2-206 
所 示 。“ 另 存 为 ”命令 通常 是 为 了 获得 文件 的 副本 ， 或 者 重新 开始 一 个 新 的 文件 。 
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3. 自动 备份 


为 了 保证 用 户 不 会 因为 电脑 死机 或 软件 裔 省 等 问题 未 存盘 ， 而 造成 不 必要 的 损失 。Axure RP 8.0 
为 用 户 提供 了 “自动 备份 ”功能 。 该 功能 与 Word 中 的 自动 保存 功能 一 样 ， 会 按照 用 户 设 定 的 时 间 自 
动 保存 文档 。 
1) 启动 自动 备份 
执行 “文件 > 自动 备份 设置 ”命令 ， 弹 出 “备份 设置 ”对 话 框 ， | cose ise 
如 图 2-207 所 示 。 
勾 选 “启用 备份 ” 复 选 框 , 即 可 启动 自动 备份 功能 。 在 “备份 间隔 " 
文本 框 中 输入 希望 间隔 保存 的 时 间 即 可 。 [8 2-207 
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[v 启用 备份 
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2) 从 备份 中 恢复 

如 果 用 户 出 现 意 外 ， 需 要 恢复 自动 备份 时 的 数据 ， 可 以 执行 “文件 > 从 备份 中 恢复 ”命令 ， 
在 弹出 的 “从 备份 中 恢复 文件 ”对 话 框 中 选择 文件 恢复 的 时 间 点 ， 如 图 2-208 所 示 。 选 择 自动 
备份 日 期 后 ， 单 击 “ 恢 复 ” 按 钮 ， 即 可 完成 文件 的 恢复 操作 ， 如 图 2-209 所 示 。 
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1. RP 文件 格式 

RP 文件 格式 是 指 单一 用 户 模式 ， 是 设计 师 使 用 Axure RP 进行 原型 设计 时 创建 的 单独 文件 ， 是 
Axure RP 默认 的 存储 文件 格式 。 以 RP 格式 保存 的 原型 文件 ,是 作为 一 个 单独 文件 存储 在 本 地 硬盘 上 的 。 
这 种 Axure RP 文件 与 其 他 应 用 文件 ， 如 Word 和 Excel 文件 完全 相同 ， 如 图 2-210 所 示 。 

2. RPPRJ 文件 格式 


RPPRJ 文件 是 指 团队 协作 的 项 目 文件 ， 通 常用 于 团队 中 多 人 协作 处 理 同一 个 较为 复杂 的 项 目 。 
在 制作 复杂 的 项 目 时 也 可 以 选择 使 用 团队 项 目 , 因为 团队 项 目 允许 随时 查看 并 恢复 到 任意 的 历史 版 本 ， 
如 图 2-211 所 示 。 

RPPRJ 文件 格式 的 特点 如 下 。 

e 签 入 / 签 入 控制 。 

。 ”如 果 不 小 心 弄 乱 了 线 框图 ， 想 重新 来 过 ， 则 可 以 取消 签 出 。 

e。 版 本 控制 和 恢复 到 历史 版 本 。 

3. RPLIB 文件 格式 


RPLIB 文件 是 指 自 定义 元 件 模 式 ， 该 文件 格式 用 于 创建 自 定义 的 元 件 。 用 户 可 以 到 网 上 下 载 
Axure 元 件 使 用 ， 也 可 以 制作 自 定义 元 件 并 将 其 分 享 给 其 他 成 员 使 用 ， 如 图 2-212 所 示 。 





图 2-210 2-211 图 2-212 
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实例 保存 项 目 文档 





1 1 教学 视频 : 视频 \ 第 2 章 \ 保 存 项 目 文档 .mp4 EX: 源 文 件 \ 第 2 章 \ 保 存 项 目 文档 .rp 


实例 分 析 : 

该 实例 可 以 让 用 户 了 解 Axure 
RP 文档 的 保存 类 型 ， 不 同类 型 的 文 
档 在 保存 时 选择 不 同 的 格式 。 


制作 步骤 : 


执行 "文件 > 新 建 " 命 令 , 新 建 一 个 项 目 文件 ,如 图 2-213 所 示 。 将 矩形 元 件 拖 入 页 面 编辑 区 内 ， 
如 图 2-214 所 示 。 
































2-213 2-214 
单 击 “检视 矩形 ”面板 中 的 “样式 " 标签, 设置 矩形 的 样式 , 如 图 2-215 所 示 , 效果 如 图 2-216 


所 示 。 








2-215 2-216 


执行 “文件 > 保存 ”命令 , 在 弹出 的 “另存 为 " 对 话 框 的 “保存 类 型 " 中 可 以 看 到 默认 的 RP 格式 ， 
如 图 2-217 所 示 。 将 文件 保存 ， 会 看 到 RP 格式 的 文件 图 标 ， 如 图 2-218 所 示 。 
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2-217 图 2-218 


2.11.3 ”各 种 格式 文档 的 优势 


1. RP 格式 文档 归档 

每 天 工作 结束 后 ， 可 以 使 用 “另存 为 ”命令 创建 一 个 RP 文件 的 每 日 备份 版 本 。 另 外 ， 在 对 关键 
的 原型 设计 进行 重大 修改 之 前 ， 也 可 以 使 用 “另存 为 ”命令 进行 备份 保存 。 

为 什么 要 进行 备份 存档 保存 ? 随 着 要 解决 的 需求 越 来 越 细 化 ，Axure 文件 也 会 包含 越 来 越 多 的 细 
节 ， 最 初 的 设计 会 变 得 不 再 可 行 ， 加 上 利益 相关 者 和 用 户 的 反馈 意见 ， 用 户 可 能 会 对 项 目 进行 大 量 修 
改 ， 甚 至 要 回溯 到 以 前 的 某 个 版 本 进行 修改 。 

这 时 就 需要 保存 连续 的 Axure 文件 历史 。 对 于 单一 文件 ， 这 意味 着 用 户 要 负责 管理 文件 的 修订 。 
这 里 不 仅仅 要 对 文件 进行 备份 ， 还 需要 对 项 目 归 档 保存 。 

2. RPPRJ 格式 一 一 团队 项 目 

使 用 RPPRJ 格式 ， 可 以 很 好 地 服务 团队 项 目 。 团 队 中 的 每 一 个 人 都 可 以 对 项 目 中 的 内 容 进 行 编 
辑 修改 ， 并 且 可 以 随时 找 回 以 前 的 文件 版 本 。 

一 个 大 型 的 项 目 ， 通 常 需要 多 个 设计 师 同时 完成 ， 建 立 团队 项 目 可 以 将 整个 创作 团队 的 作用 最 大 
化 ， 充 分 地 调动 起 每 个 人 的 工作 积极 性 。 


本 章 主 要 介绍 了 Axure RP 8.0 的 工作 界面 ， 元 件 、 钢 笔 工具 以 及 各 个 面板 的 使 用 方法 。 用 户 可 
以 根据 实例 进行 实际 操作 ， 体 验 一 下 这 些 工具 的 使 用 方法 。 


本 章 主 要 介绍 了 Axure RP 的 基本 功能 ， 以 及 有 关 原 型 设计 的 基础 知识 ， 同 时 对 Axure RP 8.0 
的 特色 和 新 增 功能 进行 了 介绍 ， 并 详细 讲解 了 Axure RP 的 实践 应 用 。 通 过 学 习 ， 用 户 可 以 了 解 
Axure RP 8.0 的 基础 知识 和 基本 操作 ， 并 能 够 完成 软件 的 安装 和 御 载 。 
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sag 9^RPAÉ 
E 教学 视频 : 视频 \ 第 2 章 \ 导 入 RP 元 素 .mp4 F: 源 文件 \ 第 2 章 \ 导 入 RP 元 素 rp 








对 于 产品 经 理 或 交互 设计 师 来 说 ， 要 充分 [57^ | 





导入 页 面 


利用 已 有 的 资源 ， 以 提高 工作 效率 。 执 行 “文件 WESS ANE, 
> 从 RP 文件 导入 ”命令 ， 可 以 将 RP 文件 中 的 


出口 Yebay of ponerse) 


页 面 、 母 版 、 自 适应 视图 、 检 查 、 页 面 说 明 字段 、 BID excors 


D area of wioetf 人 的 邯 国 ) 


元 件 说 明 、 自 定义 字 自 设置、 样式、 变量 和 辅助 
线 等 内 容 直接 导入 到 新 文件 中 , 供用 户 再 次 使 用 。 




















D mean CuleN | 
肪 “打开 .<0; Cul+O 
THER , | 
EB oem Criss 
另 让 为 .<A> Cel+Shift+s | 
从 RP 文件 导入.<l> | 
BR 
WERWRB..-T- 
TIHIWRB..-G» 
| 





新 建 一 个 文件 ， 执 行 “ 文 件 > 从 RP X 弹出 “打开 ”对 话 框 ,选择 “素材 \ 第 2 章 \ 导 





























件 导 入 ”命令 。 入 RP 元 素 .rp” 文 件 ， 单 击 “ 打 开 ” 按 钮 。 
EN Basos 

在 打开 的 “导入 向 导 ” 对 话 框 中 选择 要 单 击 Next 按 钮 , 进入 “导入 检查 ”对 话 框 ， 

导入 的 页 面 。 选择 蔡 换 目标 页 面 或 母 版 。 


LR S — 32V 6-3: EE AERA — 16. 
Iz ches J 通用 的 原型 设计 原则 Y 
Bc FH IAJ v^ 移动 互联 网 原型 设计 原则 

”| 原型 设计 的 技巧 

掌握 Aure RP 8.0 的 使 用 技巧 ， 可 以 减少 工作 量 和 提高 原型 变量 的 使 用 

设计 的 质量 。 本 章 主 要 介绍 在 AXure RP 8.0 中 经 常用 到 的 功能 ， v 从 Photoshop 到 Axure RP 

并 且 介 绍 原型 设计 的 原则 和 接 到 项 目 时 首要 的 工作 任务 等 ， 学 习 本 ^ 在 Axure 中 使 用 Flash 

章 会 对 Axure RP 有 新 的 看 法 。 








作为 一 名 原型 设计 师 ， 在 开始 制作 原型 之 前 ， 通 常 要 遵守 一 些 行业 规范 。 下 面 是 一 些 通用 的 原型 
设计 指导 原则 。 
e ”对 原型 和 文档 进行 评估 、 计 划 ， 而 且 要 保持 不 断 评 估 。 快 速 原型 设计 不 是 要 立即 使 用 Axure 
RP 画 线 框图 ， 而 是 先 明 确 方 向 ， 才 能 按照 所 预期 的 时 间 、 预 算 和 期 望 ， 最 终 交 付 原 型 。 
e ”精通 所 使 用 的 原型 工具 ,如 Axure RP, 设计 师 所 掌握 的 工具 可 以 帮助 设计 师 更 好 地 塑造 原型 ， 
也 能 让 用 户 和 合作 伙伴 更 加 信任 设计 师 的 创意 想法 和 专业 能 力 。 
。 不 要 言 目 使 用 Axure RP 实现 一 些 不 切实 际 的 效果 ， 保 持原 型 的 保 真 度 和 细节 才 是 重要 的 。 
e 考虑 多 设备 多 平台 。 要 清楚 设计 的 原型 所 针对 的 设备 和 平台 ， 充 分 考虑 多 设备 和 多 平台 。 


互联 网 时 代 的 好 处 是 可 以 快速 地 试 错 ， 产 品 合 不 合适 ， 可 以 先 做 出 来 让 用 户 使 用 ， 再 根据 用 户 的 
反馈 进行 调整 ， 不 断 地 优化 设计 。 原 型 设计 要 遵循 如 下 原则 。 

1. 设计 师 要 是 原型 的 重要 用 户 

在 原型 产品 正式 推 向 市 场 前 ， 设 计 师 是 最 先 使 用 该 产品 的 用 户 。 之 所 以 说 设计 师 是 重要 客户 ， 这 
里 涉及 两 层 意思 。 

e ”原型 设计 师 要 自己 亲身 体验 ， 解 决 原型 中 的 各 种 问题 。 例 如 ， 设 计 原 型 是 一 款 移动 阅读 器 ， 
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解决 大 家 在 上 班 途中 的 阅读 需求 ， 设 计 师 就 应 该 每 天 在 上 班 途中 使 用 各 种 阅读 器 进行 大 量 阅 
读 ， 这 样 才能 真正 具体 地 体验 细节 。 
e ”设计 师 要 大 量 地 使 用 自己 设计 的 产品 ， 以 便 得 出 改进 的 意见 。 
2. 考虑 用 户 在 界面 上 能 得 到 什么 
原型 的 界面 通常 要 考虑 功能 和 用 户 两 个 方面 。 首 先 原型 界面 的 内 容 都 是 为 了 向 用 户 传递 信息 的 ， 
应 该 选择 比较 容易 阅读 的 字体 表现 这 些 信息 ; 如 果 该 界面 是 为 了 实现 快速 向 用 户 传达 消息 ， 则 可 以 考 
虑 只 显示 信息 摘要 而 不 显示 信息 的 全 部 内 容 ; 如 果 该 界面 的 应 用 主要 针对 的 是 上 班 族 在 上 下 班 时 间 获 
得 信息 ， 界 面 上 应 该 加 上 离线 加 载 或 文字 转换 语音 功能 等 。 


对 于 移动 互联 网 产品 来 说 ， 用 户 是 在 “移动 ”的 时 候 使 用 的 ， 所 以 在 设计 产品 时 要 
充分 考虑 用 户 的 这 一 特性 。 


3. 使 用 合适 的 方式 显示 信息 

设计 师 常常 会 在 设计 显示 方式 上 煞费苦心 ， 这 通常 是 没有 必要 的 。 在 大 部 分 情况 下 ， 使 用 人 们 习 
惯 的 、 经 常 使 用 的 显示 方式 更 最 容易 被 人 们 接受 ， 没 有 必要 在 这 些 地 方 进行 创新 。 例 如 ， 使 用 网 格 显 
示 图 片 、 使 用 表格 显示 很 多 数字 、 使 用 地 图 显示 位 置 、 使 用 列表 联系 人 等 。 这 些 用 户 都 已 经 熟悉 的 方 
式 会 使 产品 获得 满意 的 用 户 体验 。 

4. 考虑 移动 设备 的 特殊 性 

现在 用 户 浏 览 产品 的 方式 越 来 越 多 ， 例 如 台式 机 、 笔 记 本 和 智能 手机 等 。 设 计 师 在 设计 产品 时 要 
充分 考虑 不 同 设备 的 特殊 性 。 例 如 移动 设备 通常 屏幕 小 、 不 方便 打字 、 单 任务 、 网 络 有 限 或 者 电池 电 
量 有 限 等 。 同 时 ， 移 动 设备 的 震动 、 闪 光 灯 、 麦 克 风 和 输入 方式 等 优点 也 要 充分 考虑 。 

5. 数据 分 析 与 用 户 分 析 

设计 师 要 及 时 收集 用 户 信息 并 进行 专业 的 分 析 ， 获 得 有 用 的 产品 使 用 反馈 信息 ， 根 据 这 些 反馈 不 
断 地 改进 产品 。 一 款 原型 设计 产品 刚 开始 时 通常 只 有 几 十 人 或 者 几 百人 使 用 ， 但 这 些 人 所 提出 的 问题 
一 般 都 具有 很 大 的 价值 ， 通 常 都 是 用 户 在 使 用 产品 时 遇 到 的 最 低级 错误 。 及 时 修改 这 些 错误 ， 对 产品 
的 可 持续 开发 非常 重要 。 

6. 从 简单 的 产品 做 起 

一 个 成 熟 的 产品 通常 需要 分 几 个 阶段 设计 制作 。 一 次 开发 的 产品 必然 不 能 满足 众多 使 用 者 的 需求 。 
只 有 对 产品 不 断 改进 ， 才 能 实现 良好 的 用 户 体验 。 

设计 师 可 以 首选 推出 简单 的 版 本 给 用 户 使 用 ， 当 有 了 一 定 的 用 户 量 后 ， 再 根据 用 户 的 反馈 对 产品 
进行 更 新 和 改进 。 


在 原型 设计 中 ， 无 论 原型 的 大 小 还 是 难 易 ， 都 要 通过 前 期 探索 、 用 户 研 究 、 产 品 分 析 、 需 求 收集 
及 分 析 、 重 复 设 计 和 可 用 性 测试 等 步骤 来 实现 。 


3.3.1 做 好 准备 工作 


当 设 计 师 在 开始 设计 制作 原型 产品 前 ， 需 要 准备 以 下 工作 。 
日 ”与 公司 内 各 利益 相关 者 的 战略 会 议 。 
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访谈 目标 用 户 。 
对 现 有 产品 进行 可 用 性 方面 的 研究 。 
竞 品 分 析 。 
对 现 有 网 站 内 容 进 行 分 析 和 盘点 。 
已 完成 部 分 信息 架构 ， 包 括 高 级 别 的 分 类 和 全 局 导航 。 
建立 一 个 重要 功能 和 特性 的 优先 级 列表 。 
建立 人 物 角色 和 一 个 用 户 角色 矩阵 ， 以 及 关键 人 物 和 流程 。 
用 于 建立 高 级 商业 需求 所 需要 的 任务 。 
基于 以 上 对 产品 和 目标 用 户 的 实质 性 了 解 后 ， 就 可 以 开始 使 用 Axure RP 软件 ， 发 挥 自己 的 创 
造 力 了 。 


3.3.2 xtti 


在 生活 中 人 们 为 了 方便 使 用 和 查找 ， 常 对 很 多 事物 都 进行 了 命名 。 在 原型 设计 项 目 中 也 是 一 样 ， 
为 元 件 重 命 名 在 整个 开发 过 程 中 都 非常 重要 。 设 计 师 反复 为 页 面 、 元 件 和 母 版 等 元 件 重 命名 可 以 带 来 
以 下 好 处 。 

1. 减少 与 利益 者 之 间 的 沟通 风险 

确保 所 有 人 都 可 以 找到 相同 的 页 面 ， 如 果 有 人 认为 页 面 上 的 元 件 有 问题 ， 可 以 通过 这 个 页 面 上 的 
ID 明确 指示 该 元 素 。 

2. 让 Axure 文件 变 得 容易 理解 

Axure RP 可 以 让 设计 师 管理 所 有 的 元 件 ， 如 果 没 有 对 元 件 命名 ， 在 创建 交互 时 就 会 变 得 非常 麻 
烦 ， 因 为 默认 名 称 都 是 一 样 的 。 

3. 可 追溯 性 

当 要 展示 如 何以 及 在 哪里 解决 相应 需求 时 ， 可 以 为 需求 关联 上 相应 的 页 面 、 母 版 及 其 他 元 素 的 ID。 


3.3.3 全 面 考虑 用 户 需求 


在 实际 的 工作 中 ， 收 集 来 的 各 种 信息 最 终 将 汇集 到 原型 设计 师 这 里 。 原 型 设计 师 需要 根据 这 些 要 
求 设计 制作 产品 的 原型 ， 把 需求 转化 为 实际 的 用 户 体验 方案 。 

设计 师 要 充分 考虑 所 有 用 户 的 需求 ， 要 从 用 户 的 性 别 、 年 龄 、 学 历 、 地 域 等 各 方面 下 手 ， 充 分 调 
研 ， 有 针对 性 地 设计 。 有 了 时 甚至 可 以 为 了 一 个 重要 角色 的 需求 而 特意 设计 ， 这 样 才能 保证 最 终 设计 制 
作出 来 的 产品 能 够 被 绝 大 多 数 用 户 所 接受 。 





3.4 


Axure RP 是 一 个 集成 了 线 框图 、 生 成 原型 和 生成 规格 文档 等 功能 的 软件 。 这 意味 着 在 创建 线 框 
图 和 原型 时 ， 可 以 同时 创建 规格 文档 。Axure RP 非常 适合 创建 用 例 图 和 流程 图 ， 因 为 它 可 以 很 方便 
地 将 用 例 图 或 流程 图 生成 到 规格 文档 中 。 


这 里 的 用 例 图 和 交互 事件 的 “用 例 编辑 ”对 话 框 不 是 同一 个 概念 。“ 用 例 编 辑 ” 对 
话 框 在 第 4 章 中 将 向 用 户 详细 讲解 ， 这 里 的 用 例 图 是 开始 设计 项 目 时 构建 的 线 框图 。 
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3.4.4. 添加 流程 图 页 面 





Axure RP 的 流程 图 页 面 和 图 表 功 能 非常 强大 ， 下 面 一 起 了 解 一 下 具体 的 使 用 方法 。 启 动 Axure 
RP 软件 ， 新 建文 件 中 默认 创建 一 个 主页 和 三 个 子 页 面 ， 如 图 3-1 所 示 。 
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通常 设计 师 会 在 所 有 页 面 的 最 前 面 创 建 一 个 流程 图 页 面 ， 以 便于 显示 页 面 的 结构 。 在 页 面 管 理 面板 
中 选中 index 页 面 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “添加 >Page Before ”命令 ， 如 图 3-2 所 示 。 















Ctrl+Shift+Return 





Ctrl+Return 





















完成 操作 后 ， 在 页 面 管理 面板 中 将 会 新 增 


一 个 页 面 ， 如 图 3-3 所 示 。 
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将 结构 图 页 面 或 者 流程 图 页 面 放 在 前 面 ， 可 以 在 人 们 开始 浏览 原型 线 框图 和 具体 交互 
国 之 前 向 他 们 阐述 整体 项 目的 概况 ， 如 用 户 流程 。 在 项 目 早 期 的 评审 会 上 ， 这 种 原型 描 
述 是 非常 有 用 的 。 
双击 新 建 的 页 面 , 将 页 面 重 命名 为 “流程 图 ", 如 图 3-4 所 示 。 选 中 流程 图 "页面 , 单 击 鼠 标 右键 ， 
在 弹出 的 菜单 中 选择 “图 表 类 型 > 流程 图 ”命令 ， 如 图 3-5 所 示 。 
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页 面 管理 面板 的 效果 如 图 3-6 所 示 。 流 程 图 的 页 面 图 标 已 经 发 生 了 改变 ， 这 样 就 很 容易 区 分 流 
程 图 页 面 和 其 他 线 框图 页 面 了 。 

















图 3-6 


Axure RP 可 以 通过 设置 页 面 的 图 标 来 区 别 流程 图 页 面 和 线 框图 页 面 。 


3.4.2 ”用 例 图 


用 例 图 是 指 由 参与 者 、 用 例 以 及 它们 之 间 的 关系 构成 的 用 于 描述 系统 功能 的 静态 视图 。 用 例 图 是 
被 称 为 参与 者 的 外 部 用 户 所 能 观察 到 的 系统 功能 的 模型 图 ， 呈 现 了 一 些 参 与 者 和 一 些 用 例 ， 以 及 它们 
之 间 的 关系 ， 主 要 用 于 对 系统 、 子 系统 或 类 的 功能 行为 进行 建 模 。 


对 于 Axure RP 来 癌 ， 元 件 面板 中 的 对 象 就 是 用 例 ， 使 用 这 些 用 例 创建 出 的 关系 图 就 称 为 
用 例 图 。 用 例 图 不 一 定 要 建 得 多 么 美观 ， 但 是 一 定 要 让 利益 相关 者 能 够 很 容易 地 看 明白 。 


在 开始 设计 原型 之 前 ， 要 确定 哪些 状态 需要 通过 原型 来 模拟 。 然 后 再 创建 用 例 图 ， 可 以 很 好 地 告 
诉 利益 相关 者 ， 哪 些 状态 和 流程 将 会 进行 模拟 并 需要 评审 和 测试 。 随 着 线 框 图 和 产品 原型 的 建立 ， 用 
例 图 的 价值 会 也 来 越 明显 。 
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3.4.3 在 流程 图 中 创建 用 例 图 





接着 3.4.1 小 节 中 的 内 容 继续 操作 ， 在 元 件 面板 中 选择 流程 图 元 件 ， 如 图 3-7 所 示 。 将 角色 元 
件 拖 抱 到 页 面 编 辑 区 内 ， 如 图 3-8 所 示 。 
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图 3-8 





3.4.4 ”优化 用 例 图 


为 了 让 用 例 图 更 加 完整 ， 可 以 将 用 户 与 用 例 关 联 起 来 ， 使 用 一 个 箭头 将 用 户 角色 和 用 例 联系 在 一 
起 。 通 过 添加 其 他 元 件 ， 为 用 例 添加 一 个 背景 和 标题 ， 将 所 有 元 件 摆 放 得 更 像 一 个 演示 文稿 ， 效 果 如 
3-11 所 示 。 





1. 选择 工具 


在 创建 用 例 图 后 ， 用 户 可 以 对 页 面 的 元 件 进行 选择 、 移 动 或 排列 。Axure RP 8.0 中 共 提 供 了 3 
种 选择 工具 供用 户 使 用 ， 如 图 3-12 所 示 。 
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图 3-11 


1) 交叉 选择 工具 

交叉 选择 工具 是 Axure RP 的 默认 选择 工具 。 在 页 面 中 单 击 并 拖 动 鼠标 时 ， 被 选择 所 接触 到 的 
元 件 都 会 被 选中 ( 只 接触 到 一 点 也 会 被 选择 ) 。 

2) 包含 选择 工具 

只 有 被 完全 包含 在 选择 区 内 的 元 件 才 会 被 选中 。 

3) 连接 线 工 具 

在 画 流程 图 时 ， 连 接线 工具 非常 有 用 。 它 会 产生 连接 线 ， 用 于 连接 各 个 流程 图 元 件 。 


相 比 默认 的 交叉 选择 工具 ， 包 含 选 择 工 具 更 加 实用 ， 因 为 它 只 能 选择 完全 被 选 框 包 
区 围 的 元 件 ， 选 择 效果 更 精确 ， 可 以 把 一 些 虽然 离 得 近 但 不 需要 的 元 件 排除 在 外 。 
2. 格式 刷 工具 
使 用 该 工具 可 以 快速 地 将 元 件 的 视觉 样式 指定 给 另 一 个 元 件 对 象 或 
全 部 元 件 ， 如 图 3-13 所 示 。 
格式 刷 工具 有 助 于 快速 保持 元 件 的 视觉 一 致 性 ， 当 用 户 将 带 有 渐变 


效果 的 视觉 样式 快速 应 用 到 另 一 个 页 面 的 元 件 上 时 ， 才 能 真正 体现 它 的 便 
利 。 通 常 使 用 复制 、 粘 贴 来 代替 格式 刷 工 具 并 不 是 一 种 好 的 操作 习惯 。 








图 3-13 


格式 刷 工具 在 快速 创建 草稿 时 非常 有 用 ， 能 够 复制 重复 的 格式 化 步骤 ， 但 是 要 保持 
风格 的 一 致 ， 最 好 是 使 用 第 2 章 中 讲解 的 样式 。 


在 图 3-12 中 ， 用 户 会 看 到 钢笔 工具 ， 钢 笔 工 具 的 详细 使 用 方法 在 本 书 的 第 2 章 中 
已 经 向 用 户 详细 讲解 。 


3. 排列 与 分 布 
要 对 用 例 图 中 的 各 个 元 件 进行 排列 时 ， 用 户 可 以 选择 使 用 工具 栏 中 的 排列 工具 ， 快 速 、 精 准 地 排 
列 各 个 元 件 ， 工 具 栏 如 图 3-14 所 示 。 
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图 3-14 
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BA: 当 同时 选择 两 个 以 上 的 元 件 时 ， 可 以 单 击 “组 合 ” 按 钮 ， 将 元 件 进 行 组 合 。 

取消 组 合 : 将 组 合 的 元 件 取消 组 合 。 

顶层 : 调整 元 件 的 层级 ， 将 其 移动 到 所 有 元 件 之 上 ， 也 就 是 最 顶层 。 

底层 : 调整 元 件 的 层级 ， 将 其 移动 到 所 有 元 件 之 下 ， 也 就 是 最 底层 。 

对 齐 : 当 同时 选择 两 个 以 上 的 元 件 时 ， 可 以 对 元 件 进行 对 齐 和 排列 的 操作 ， 对 齐 排列 的 方式 很 多 ， 
如 图 3-15 所 示 。 





图 3-15 


e 左 对 齐 : 将 所 选 对 象 以 顶部 对 象 为 参照 ， 全 部 左 侧 对 齐 ， 如 图 3-16 所 示 。 
e 左右 居中 : 将 所 选 对 象 以 顶部 对 象 为 参照 ， 全 部 垂直 中 心 对 齐 ， 如 图 3-17 所 示 。 
e BNF: 将 所 选 对 象 以 顶部 对 象 为 参照 ， 全 部 右 侧 对 齐 ， 如 图 3-18 所 示 。 
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图 3-16 3-17 图 3-18 
e 顶部 对 齐 : 将 所 选 对 象 以 左 侧 对 象 为 参照 ， 全 部 顶部 对 齐 ， 如 图 3-19 所 示 。 
e ”上 下 居中 : 将 所 选 对 象 以 左 侧 对 象 为 参照 ， 全 部 水 平 中 心 对 齐 ， 如 图 3-20 所 示 。 
€ 底部 对 齐 : 将 所 选 对 象 以 左 侧 对 象 为 参照 ， 全 部 底部 对 齐 ， 如 图 3-21 所 示 。 
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图 3-19 图 3-20 图 3-21 


分 布 : 当 同时 选择 两 个 以 上 的 元 件 时 ， 可 以 将 元 件 分 布 排列 ， 分 布 排列 可 以 垂直 分 布 和 水 平分 布 ， 
如 图 3-22 所 示 。 执 行 垂直 分 布 效果 如 图 3-23 所 示 。 
e ”水 平分 布 : 将 、 选 中 的 对 象 以 左右 两 个 对 象 为 参照 水 平均 匀 排 列 ， 如 图 3-24 所 示 。 
e EDD: 将 选中 的 对 象 以 上 下 两 个 对 象 为 参照 垂直 均匀 排列 ， 如 图 3-25 所 示 。 
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图 3-24 图 3-25 
锁定 / 取消 锁定 ， 在 有 很 多 元 件 的 情况 下 ， 可 以 将 元 件 锁定 后 ， 编 辑 想 要 编辑 的 元 件 ， 而 其 他 元 
件 不 受 影响 。 


继续 上 一 节 中 的 用 例 图 ， 将 所 有 “椭圆 形 ”元 件 选中 ， 并 且 对 齐 并 垂直 分 布 ， 然 后 将 所 有 选中 的 
元 件 进行 组 合 ， 如 图 3-26 所 示 。 选 择 这 个 组 ， 按 住 Shift 键 ， 再 选择 用 来 表示 用 户 的 “角色 ”元 件 ， 
将 选中 的 元 件 居中 对 齐 ， 就 可 以 让 用 户 与 用 例 对 齐 ， 如 图 3-27 所 示 。 

使 用 连接 线 工 具 ， 将 用 户 与 用 例 连 接 起 来 。 可 以 使 用 新 增加 的 水 平 箭头 工具 将 用 户 与 用 例 连接 起 
来 ， 如 图 3-28 所 示 。 

4. 缩放 工具 

用 户 可 以 在 该 下 拉 列 表 中 选择 不 同 的 缩放 比例 ， 以 查看 不 同 尺寸 的 文件 效果 ， 如 图 3-29 所 示 。 





图 3-27 
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3.4.5 ”使 用 文件 夹 管理 页 面 


通过 文件 夹 可 以 管理 页 面 管理 面板 中 的 页 面 ， 虽 然 功能 很 P 
小 ， 但 作用 却 很 大 ， 如 图 3-30 所 示 。 可 以 将 页 面 管理 面板 中 
的 页 面 分 为 流程 图 组 和 线 框图 组 等 更 多 组 。 

使 用 文件 夹 可 以 保持 页 面 的 独立 ， 能 够 反映 项 目 中 的 关键 
内 容 。 


3.4.6 创建 流程 图 


在 设计 制作 一 个 产品 原型 时 ， 首 先 要 将 原型 中 的 各 个 页 面 设 计 完成 ， 然 后 再 将 原型 中 的 所 有 页 面 
生成 对 应 结构 的 原型 结构 图 。 在 页 面 面 板 的 index 文件 上 单 击 鼠 标 右键 ， 执 行 弹出 菜单 中 的 “生成 流 
程 图 ”命令 ， 如 图 3-31 所 示 ， 即 可 完成 流程 图 的 生成 。 








图 3-30 
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在 页 面 面 板 中 添加 如 图 3-32 所 示 的 原型 页 面 。 在 “首页 ”文件 上 单 击 鼠 标 右键 ， 在 弹出 的 菜单 
中 选择 “添加 >Page Before" dp, 在 “首页 ”前 新 建 一 个 页 面 , 修改 名 称 为 “流程 图 ”, 如 图 3-33 
所 示 。 
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选中 该 页 面 ， 单 击 鼠 标 右 键 ， 在 弹出 的 菜单 中 选择 “图 表 类 型 > 流程 图 ”命令 ， 效 果 如 图 3-34 
所 示 。 双 击 “ 流 程 图 ”页 面 ， 打 开 “ 结 构图 ”页 面 ， 如 图 3-35 所 示 。 
x x Pages Dama 
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选中 “首页 ”页 面 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “生成 流程 图 ”命令 ， 弹 出 “生成 流程 
图 ”对 话 框 ， 如 图 3-36 所 示 。 选 择 “ 向 下 ”选项 ， 单 击 “确定 ”按钮 ， 效 果 如 图 3-37 所 示 。 
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在 前 面 介绍 了 一 些 元 件 的 基础 知识 ， 下 面 再 来 了 解 一 下 元 件 的 使 用 技巧 。 


在 整 本 书 中 ， 用 户 会 看 到 很 多 “将 某 元 件 拖 中 到 页 面 编辑 区 内 ”这 样 的 描述 ， 什 么 意思 呢 ? 打开 
Axure RP， 在 元 件 面板 中 选择 一 个 元 件 ， 按 住 鼠标 左 键 不 松 ， 将 它 拖 鬼 到 页 面 编辑 区 后 松 开 鼠 标 ， 
元 件 就 会 出 现在 页 面 编辑 区 中 ， 这 就 是 将 元 件 拖 抱 到 页 面 编 辑 区 内 的 操作 ， 如 图 3-38 所 示 。 
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图 3-38 


3.5.2 ”了解 元 件 的 坐标 


每 个 位 于 页 面 编辑 区 的 元 件 都 有 自己 的 坐标 , 用 户 可 以 通过 设置 元 件 的 X 坐标 和 YY 坐标 的 数值 ， 
实现 对 元 件 位 置 的 精确 控制 。 

选中 页 面 中 任 一 元 件 ， 在 样式 工具 栏 中 可 以 看 到 元 件 的 X 坐标 和 Y 坐标 数值 ， 如 图 3-39 
所 示 。 
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图 3-39 


在 页 面 编辑 区 内 移动 元 件 ， 元 件 的 右 下 角 会 出 现 灰色 的 显示 框 显示 其 当前 位 置 ， 如 图 3-40 
所 示 。 
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图 3-40 


对 于 每 个 元 件 来 说 ， 除 了 拥有 X 坐标 和 Y 坐标 外 ， 还 有 一 个 隐藏 的 Z 坐标 ， 也 就 是 说 在 垂直 于 
屏幕 方向 上 的 位 置 。 这 个 坐标 指 的 只 是 相对 的 位 置 ， 可 以 通过 调整 顺序 改变 元 件 的 Z 坐标 。 

当 页 面 编辑 区 内 有 多 个 元 件 时 ， 选 中 元 件 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “顺序 ”命令 ， 
弹出 子 菜单 ， 如 图 3-41 所 示 。 





顺 订 <O> N ^| ETES- Ctrl Shift«] 
PERI Wy 秆 于 庭 层 <K> Ctrl+Shift+[ 
i Wi ”上 移 一 层 <F> Ctrl+] 
dd "3 TE—E«B- Ctrl+[ 
图 3-41 
置 于 顶层 : 在 垂直 于 屏幕 的 方向 上 离 用 户 最 近 。 置 于 顶层 的 元 件 位 于 所 有 元 件 的 上 面 ， 所 以 不 会 


被 遮挡 。 

置 于 底层 : 在 垂直 于 屏幕 的 方向 上 离 用 户 最 远 。 置 于 底层 的 元 件 位 于 所 有 元 件 的 下 面 ， 任 何其 他 
元 件 都 会 遮挡 这 个 元 件 。 

上 移 一 层 : 让 元 件 在 垂直 屏幕 的 方向 上 离 用 户 再 近 一 点 。 

下 移 一 层 : 让 元 件 在 垂直 屏幕 的 方向 上 离 用 户 再 远 一 点 。 

如 图 3-42 所 示 ， 黑 色 的 矩形 元 件 遮挡 住 了 灰色 的 和 矩形 元 件 ， 说 明 黑 色 的 矩形 元 件 在 垂直 屏 
幕 的 方向 离 用 户 比 较 近 。 如 果 用 户 选中 灰色 矩形 ， 并 且 让 灰色 矩形 元 件 向 上 移 一 层 ， 就 会 发 现 灰 
色 和 矩形 元 件 遮 挡 了 黑色 矩形 元 件 ， 如 图 3-43 所 示 。 一 般 来 说 后 被 添加 到 页 面 编辑 区 的 元 件 会 离 
用 户 更 近 。 








图 3-42 图 3-43 


当 页 面 编 辑 区 中 的 元 件 比 较 多 时 ， 要 注意 元 件 的 Z 轴 位 置 。 因 为 一 旦 一 个 元 件 被 其 
他 元 件 庶 挡 了 ， 它 将 无 法 获得 用 户 的 交互 响应 。 
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3.5.3 ”设置 元 件 的 尺寸 


每 个 添加 到 页 面 编辑 区 的 元 件 都 有 一 个 尺寸 ， 以 便 用 户 实时 了 解 元 件 的 大 小 。 选 中 编辑 区 中 的 任 
一 元 件 ， 工 具 栏 中 将 会 显示 当前 元 件 的 尺寸 信息 ， 如 图 3-44 所 示 。 

W 是 元 件 的 宽度 ，H 是 元 件 的 高 度 ， 对 于 大 部 分 元 件 来 说 ， 这 些 值 都 是 可 以 修改 的 。 对 于 某 些 
特殊 元 件 ， 例 如 单 选 按钮 元 件 和 复 选 框 元 件 ， 就 不 能 修改 高 度 。 当 选中 这 种 元 件 时 ， 高 度 文本 框 显 示 
为 灰色 状态 ， 如 图 3-45 所 示 。 
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3.5.4 ”隐藏 与 锁定 元 件 


在 原型 制作 过 程 中 ， 有 时 需要 暂时 隐藏 某 个 元 件 ， 以 便于 其 他 元 件 的 制作 。 

选择 要 隐藏 的 对 象 ， 勾 选 工具 栏 右 下 角 的 “隐藏 ” 复 选 框 或 “属性 ”面板 上 的 “隐藏 ” 复 选 框 ， 
即 可 将 当前 对 象 隐藏 ， 如 图 3-46 所 示 。 再 次 取消 勾 选 ， 即 可 将 对 象 显示 。 

用 户 也 可 以 在 想 要 隐藏 的 对 象 上 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “ 设 为 隐藏 ”命令 ， 即 可 将 
该 元 件 隐藏 ， 如 图 3-47 所 示 。 隐 藏 后 的 对 象 将 呈现 淡 黄 色 ， 如 图 3-48 所 示 。 再 次 单 击 鼠 标 右键 ， 
在 弹出 的 菜单 中 选择 “ 设 为 可 见 ”命令 ， 即 可 将 对 象 正 常 显示 。 

如 果 是 为 了 避免 元 件 影响 页 面 效果 ,用户 可 以 首先 将 元 件 重 命名 并 隐藏 ， 然 后 执行 “视图 > 1898" 
命令 ， 取 消 义 选 “ 隐 藏 对 象 ”选项 ， 如 图 3-49 所 示 。 此 时 ， 页 面 中 隐藏 的 元 件 ， 只 有 在 被 选中 的 情 
况 下 才 会 显示 ， 效 果 如 图 3-50 所 示 。 
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除了 隐藏 元 件 外 ， 用 户 还 可 以 将 影响 操作 的 元 件 锁定 ， 选 择 要 锁定 的 元 件 ， 单 击 工具 栏 上 的 “ 锁 
JE” 按钮 , 即 可 将 当前 元 件 锁定 。 锁 定 的 对 象 将 不 能 参与 任何 操作 。 单 击 工 具 栏 上 的 “取消 锁定 ”按钮 ， 
即 可 解除 元 件 锁定 。 
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用 户 可 以 利用 别人 做 好 的 图 片 作为 背景 ， 然 后 再 在 这 个 背景 上 利用 Axure RP 元 件 添加 一 些 需 
要 的 元 素 和 交互 事件 ， 这 种 方法 能 够 节省 制作 高 保 真 原 型 的 时 间 。 用 户 可 以 利用 成 型 的 页 面 ， Saik 
重要 位 置 的 交互 效果 ， 其 他 部 分 可 以 以 背景 的 方式 存在 。 接 下 来 通过 实例 的 方式 向 用 户 讲解 背景 覆 
法 的 使 用 。 









实例 背景 覆盖 法 
12 教学 视频 : 视频 \ 第 3 章 \ 背 景 覆 盖 法 .mp4 — 源 文件 : 源 文件 \ 第 3 章 \ 背景 





实例 分 析 : 掌柜 热卖 
使 用 背景 覆盖 法 可 以 很 好 [ MERE ad o 


地 提高 工作 效率 。 用 户 可 以 快 
速 地 将 网 页 中 需要 替换 的 部 分 
替换 ， 而 且 还 可 以 针对 蔡 换 部 
分 添加 交互 效果 ， 而 对 其 他 部 





分 没有 任何 影响 。 
适合 ; 企业 图 书馆 /农家 书 层 /图 书 捐赠 
中 小 大 学 图 书馆 装 务 /家 庭 杂志 用 书 
W 1.00 AiR: 25 
制作 步骤 : 


执行 “文件 > 新 建 ”命令 ， 新建 一 个 项 目 文档 ， 如 图 3-51 所 示 。 将 图 片 元 件 拖 钨 到 页 面 编 
辑 区 内 ， 如 图 3-52 所 示 。 























3-51 3-52 
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双击 图 片 元 件 , 选择 “素材 \ 第 3 章 \001.jpg” 图 片 , 如 图 3-53 所 示 。 导入 效果 如 图 3-54 所 示 。 
在 选项 栏 上 将 图 片 的 坐标 调整 为 X40、Y40， 如 图 3-55 所 示 。 将 和 矩形 1 元 件 拖 忠 到 页 面 编 
辑 区 内 ， 如 图 3-56 所 示 。 
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图 3-53 























图 3-55 图 3-56 


在 样式 面板 中 ， 将 矩形 元 件 设置 边框 为 无 ， 填 充 颜 色 为 白色 ， 并 将 其 移动 到 淘宝 网 页 右 侧 直 
通车 位 置 ， 如 图 3-57 所 示 。 调 整 矩 形 元 件 大 小 ， 如 图 3-58 所 示 。 
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选中 整个 淘宝 页 面 ， 单 击 工具 栏 中 的 “锁定 ”按钮 ， 将 页 面 锁定 。 锁 定 后 的 元 件 边 框 将 显 
THAE, WE 3-59 所 示 。 再 次 拖 抱 一 个 图 片 元 件 到 页 面 编辑 区 内 ， 在 选项 栏 上 修改 图 片 尺寸 为 
W270、H300， 效 果 如 图 3-60 所 示 。 
































图 3-60 


双击 图 片 元 件 ， 选 择 “ 素 材 \ 第 3 章 \002.jpg” 图 片 ， 如 图 3-61 所 示 。 单 击 “ 打 开 ” 技 钮 ， 
导入 图 片 效 果 如 图 3-62 所 示 。 
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继续 拖 电文 本 标签 元 件 到 页 面 编辑 区 内 ， 设 置 文本 框 的 尺寸 为 W60、H20,， 如 图 3-63 所 示 。 
设置 字体 为 Arial， 颜 色 为 #CCCCCC， 输 入 如 图 3-64 所 示 的 文字 。 











BB c [171035 | 
iB: 210 dom 38: 210 
---5—-ü ——EB-—-f 
图 3-63 图 3-64 


使 用 相同 的 方法 绘制 图 书 的 标价 ， 完 成 效果 如 图 3-65 所 示 。 调 整 文本 标签 元 件 和 图 书 标价 
的 位 置 ， 最 终 效果 如 图 3-66 所 示 。 

利用 背景 覆盖 法 可 以 不 用 绘制 整个 页 面 ， 只 需 将 页 面 中 的 某 个 部 分 覆盖 并 重新 制作 。 使 用 背景 覆 
盖 法 除了 节省 大 量 工作 时 间 外 ， 还 大 大 地 提高 了 工作 效率 ， 用 户 还 可 以 为 绘制 元 件 添加 链接 ， 实 现 丰 
富 的 交互 效果 。 
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在 Axure RP 中 使 用 变量 ， 可 以 在 原本 简单 的 交互 中 加 入 复杂 的 逻辑 ， 通 过 对 变量 值 的 判断 获 
得 对 应 的 操作 。 例 如 ， 要 实现 当 单 击 按键 一 次 就 自动 增加 计数 的 功能 。 这 种 功能 有 点 类 似 各 大 社交 网 站 
看 到 的 “点 赞 ” 功 能 ， 为 了 实现 这 个 功能 ， 就 需要 使 用 一 个 变量 来 “记录 ”当前 用 户 已 经 单 击 过 按钮 的 
次 数 ， 每 多 单 击 一 次 ， 就 给 这 个 变量 的 值 加 1 并 显示 出 来 。 接 下 来 通过 实例 操作 详细 讲解 变量 的 使 用 。 
执行 “文件 > 新 建 ”命令 ， 新 建 一 个 项 目 文档 ， 如 图 3-67 所 示 。 将 文本 标签 元 件 拖 彼 到 页 
面 编辑 区 内 ， 设 置 元 件 的 坐标 为 X50、Y50， 尺 寸 为 W150， 如 图 3-68 所 示 。 
re aue AP Ao iia e E TCR x 


RIR 
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图 3-67 图 3-68 


在 样式 面板 中 设置 字体 为 微软 雅 黑 ， 字 体 大 小 为 20， 输 入 如 图 3-69 所 示 的 文字 。 将 一 个 主 
要 按钮 元 件 拖 遇 到 页 面 编辑 区 中 ， 设 置 其 坐标 为 X190、Y51， 尺 十 为 W100、H25， 双 击 按钮 元 件 
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修改 文本 内 容 为 “ 单 击 ”， 如 图 3-70 所 示 。 
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图 3-69 图 3-70 


选中 按钮 , 双击 “检视 : 矩形 ”面板 的 “属性 ”标签 下 的 “鼠标 单 击 时 ”事件 , 如 图 3771 所 示 。 
弹出 “用 例 编辑 ”对 话 框 ， 如 图 3-72 所 示 。 
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b 说明 
图 3-71 图 3-72 


在 “用 例 编辑 ”对 话 框 中， 选择 “添加 动作 ”列表 中 的 “设置 变量 值 ”， 在 “组 织 动 作 ” 列 
表 中 会 出 现 “设置 变量 ”选项 ， 如 图 3-73 所 示 。 勾 选 “ 配 置 动作 ”列表 下 的 OnLoadVariable 并 
设置 值 为 +1， 如 图 3-74 所 示 。 







































































图 3-73 图 3-74 


继续 添加 “设置 文本 " 动作 , 如 图 3-75 所 示 。 单 击 "确定 " 按钮 , 执行 “预览 ” 命令 , 查看 效果 ， 
如 图 3-76 所 示 。 
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图 3-75 图 3-76 


设计 师 和 产品 经 理 共同 制作 线 框图 ， 是 一 种 高 效 的 工作 方式 。 将 设计 图 从 Photoshop 中 移 到 
Axure RP 中 的 方法 ， 也 是 设计 图 从 PSD、JPG 格式 转换 含有 互动 效果 的 HTML 的 方法 。 

Photoshop 中 的 画布 ， 也 就 是 整个 工作 区 ， 与 Axure RP 中 不 太 相同 。 例 如 图 3-77 所 示 ， 整 
个 图 像 都 是 Photoshop 的 工作 区 ; 而 在 Axure RP 中 只 需要 制作 中 间 白 色 以 外 的 部 分 ， 在 画布 中 间 
的 部 分 是 工作 区 。 


Axure RP 工作 区 


Photoshop 工作 区 





3-77 
整个 画布 的 尺寸 为 W2000、H2000， 中 间 页 面 的 尺寸 为 W1600、H1976。 页 面 的 尺寸 也 就 是 
在 Axure RP 中 绘制 的 产品 原型 的 尺寸 。 


ft Axure 中 制作 原型 时 ， 也 要 考虑 边界 的 问题 ， 页 面 的 尺寸 要 与 Photoshop 中 设置 


f£ Photoshop 中 设计 页 面 时 , 通常 会 考虑 屏幕 的 分 辨 率 , 所 以 才 有 了 两 侧 的 白色 区 域 。 
的 保持 一 致 。 
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在 PSD 文件 中 ， 不 同 的 元 素 被 放置 在 不 同 的 图 层 中 ， 以 便于 用 户 
管理 和 编辑 ，Photoshop 的 “图 层 ” 面 板 如 图 3-78 所 示 。 

可 以 看 到 ， 所 有 文字 、 按 钮 、 背 景 和 图 片 都 在 不 同 的 图 层 中 。 在 
Axure RP 中 这 些 不 同 图 层 的 内 容 ， 会 以 不 同 的 元 件 或 者 元 件 组 合 的 
方式 显示 。 设 计 师 要 尽量 按照 图 层 的 排列 方式 进行 制作 ， 这 样 不 但 有 
利于 Photoshop 的 制作 ， 而 且 对 于 制作 Axure RP 高 保 真 原型 也 非 
常 有 效 。 


3.8.1 素材 拼接 方法 


在 Photoshop 中 将 局 部 页 面 保 存 为 图 片 ， 然 后 在 Axure RP 中 
通过 添加 图 片 元 件 的 方法 导入 ， 进 行 素材 拼接 ， 快 速 方便 地 制作 出 产 
品 原型 页 面 效果 。 接 下 来 向 用 户 介绍 具体 的 制作 方法 。 

在 Photoshop 中 选择 联系 电话 图 层 ， 将 其 他 图 层 隐 藏 ，“ 图 层 ” 
面板 如 图 3-79 所 示 。 使 用 “和 矩形 选 框 工具 ”创建 如 图 3-80 所 示 的 
选区 。 
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图 3-79 图 3-80 
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将 选中 的 选区 复制 ， 新 建 一 个 Photoshop 文件 ， 新 文件 的 各 项 参数 如 图 3-81 所 示 。 执 行 “ 编 
iB > 粘贴 ”命令 ， 将 复制 的 图 像 粘 贴 到 新 建 的 文件 中 ， 效 果 如 图 3-82 所 示 。 








名 称 (N): 未 标题 -1 





RE E BERFRBD)... 
高 度 (H): 202 像素 = 
ARER): 72 像素 /英寸 “~ 
颜色 模式 (M); RGB 颜色 ~ sip ~ 
背景 内 容 (C): 透明 


2) mn 


颜色 配置 文件 (0): 工作 中 的 RGB: SRGB IEC6196... ~ 
像素 长 离 比 (X): 方形 像素 - 








图 3-81 图 3-82 


执行 “文件 > 存储 为 Web 所 用 格式 ”命令 , 弹出 “存储 为 Web 所 用 格式 ”对 话 框 , 单 击 “ 保 存 ” 
按钮 ， 将 文件 保存 ， 如 图 3-83 所 示 。 回 到 Axure RP 中 ， 将 一 个 图 片 元件 拖 中 到 页 面 编辑 区 中 ， 
双击 将 刚刚 保存 好 的 图 片 导 入 ， 并 设置 位 置 为 X1399、Y88， 尺 寸 为 W426、H47， 如 图 3-84 

















| xl1399 [ylss |w:|426 [CR | 
图 3-84 


接 下 来 可 以 使 用 相同 的 方法 将 Photoshop 中 的 其 他 素材 保存 为 图 片 ， 并 导入 到 Axure RP m, 
完成 的 原型 效果 如 图 3-85 所 示 。 
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3.8.2 合并 拷贝 拼图 方法 


有 时 Photoshop 中 的 同一 个 功能 的 内 容 被 分 布 在 不 同 的 图 层 ， 
可 以 通过 合并 拷贝 的 方法 拷贝 图 像 。 在 Photoshop 中 使 用 “矩形 选 框 F 
工具 ”选中 如 图 3-86 所 示 的 内 容 。 用 户 可 以 在 Photoshop 的 “信息 ” 
面板 上 看 到 选 框 的 坐标 为 X1590、Y107， 尺 寸 为 W427、H53。 -" 
执行 “编辑 > 合并 拷贝 ”命令 ， 如 图 3-87 所 示 。 即 可 将 所 有 图 ， 
层 中 选 框 内 的 对 象 全 部 拷贝 在 内 存 中 。 "i 
f£ Axure RP 中 新 建 一 个 项 目 ， 在 index 页 面 中 选择 “粘贴 ” 
命令 或 者 按 下 快捷 键 Ctrl+V， 将 拷贝 内 容 粘 贴 到 Axure RP rh, i£ 图 3-86 
0 尺寸 修改 元 件 的 坐标 和 尺寸 ， 如 图 3-88 所 示 。 

















图 3-87 图 3-88 











接 下 来 可 以 使 用 相同 的 方法 将 页 面 中 的 其 他 内 容 拷贝 粘贴 到 Axure RP 文件 中 ， 并 按照 
Photoshop 中 页 面 的 样张 排列 整齐 ， 完 成 效果 如 图 3-89 所 示 。 
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上 经 典 案例 


图 3-89 
































3.8.3 ”两 种 方法 的 好 处 


使 用 素材 拼接 的 方法 ， 可 以 在 Axure RP 中 得 到 透明 且 独 立 的 元 件 ， 如 图 3-90 所 示 。 但 是 在 
制作 时 需要 严格 地 按照 坐标 尺寸 完成 。 

使 用 图 层 合并 拼图 的 方法 是 将 背景 一 起 拷贝 到 Axure RP 中 ， 如 图 3-91 所 示 。 由 于 元 件 都 具 
有 相同 颜色 的 背景 ， 所 以 尺寸 坐标 大 概 一 致 就 可 以 ， 第 二 种 方法 是 一 种 相对 比较 容易 的 制作 方法 。 


B sss. 0531-2222 5977 从 ema: 0531-2222 5977 
图 3-90 图 3-91 
两 种 方法 同时 使 用 时 要 注意 以 下 几 点 。 
e ”坐标 的 统一 。 
注意 使 用 合并 拷贝 。 


在 Photoshop 中 选择 对 象 时 ， 一 定 要 注意 边界 。 
设计 师 在 设计 原 图 的 时 候 ， 一 定 要 多 使 用 图 层 ， 尽 量 把 不 同 的 部 分 放 在 不 同 的 图 层 上 。 
在 Axure RP 中 拼合 的 时 候 要 注意 元 件 在 Z 轴 方 向 的 分 布 ， 也 就 是 把 握 好 层级 关系 。 


设计 师 要 做 的 是 将 设计 图 在 Photoshop 中 细致 地 设计 好 ， 然 后 严格 按照 尺寸 大 小 和 
坐标 位 置 在 Axure RP 中 拼接 起 来 。 





在 Axure RP 中 不 能 直接 使 用 Flash， 没 有 一 个 叫 Flash 的 元 件 可 以 使 用 。Flash 对 象 只 能 通 
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过 使 用 一 个 唯一 的 URL 表示 。 

在 使 用 Axure RP 制作 页 面 原型 时 ， 有 时 会 使 用 Flash 完成 一 些 丰 富 的 页 面 效 果 ， 例 如 页 面 中 
嵌入 的 视频 ， 播 放 产品 广告 。 下 面 一 起 学 习 如 何在 Axure RP 中 引用 Flash. 

Axure RP 提供 了 一 个 非常 强大 的 元 件 ， 叫 作 内 联 框架 元 件 。 通 过 这 个 元 件 ， 可 以 在 一 个 页 面 中 
通过 一 个 URL 引用 另 一 个 页 面 。 既 然 一 张 图 片 、 一 个 Flash 都 可 以 用 URL 来 表示 ， 那 么 在 设计 中 
可 以 通过 内 联 框架 元 件 在 一 个 页 面 中 引用 另 一 个 图 片 或 者 Flash。 

用 内 联 框 架 元 件 引 用 Flash， 首 先 获得 引用 的 Flash 的 URL 地 址 ， 然 后 在 内 联 框架 元 件 上 单 击 
鼠标 右键 ， 在 弹出 的 菜单 中 选择 “框架 目标 页 面 ”命令 ,如 图 3-92 所 示 。 最 后 在 弹出 的 “链接 属性 ” 
对 话 框 中 输入 Flash 的 URL 地 址 即 可 ， 如 图 3-93 所 示 。 

















Shift+F5 


Alt+ Shift+Ctrl+C 


















































图 3-92 图 3-93 


在 Axure RP 的 项 目 编辑 页 面 中 , 无 法 看 到 Flash 的 播放 效果 ， 只 能 在 生成 原型 后 ， 
才 可 以 看 到 引用 的 Flash 效果 。 


对 于 大 部 分 的 视频 网 站 来 说 ， 获 得 视频 的 地 址 是 非常 容易 的 。 例 如 优酷 网 ， 只 要 单 击 视频 下 方 的 
“分 享 给 好 友 ” 右 侧 的 向 下 按钮 ， 如 图 3-94 所 示 。 在 弹出 的 对 话 框 中 单 击 Flash 地 址 后 的 “复制 ” 
按钮 ， 即 可 获得 Flash 视频 地 址 ， 如 图 3-95 所 示 。 


内 联 框 架 元 件 很 强大 ， 理 论 上 来 说 ， 可 以 将 多 个 页 面 通过 链接 的 方式 组 合 在 一 起 ， 
制作 一 个 由 不 同 小 页 面 组 合 而 成 的 大 页 面 。 


:900000^^00 


把 杭 条 站 下 Blog 东 68S 怎么 贴 ? 





M 0303/1157 











图 3-94 图 3-95 
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对 于 其 他 网 站 上 的 视频 ， 需 要 借助 一 些 特殊 工具 。 例 如 ， 使 用 极速 浏览 器 打开 想 要 获得 Flash 
的 页 面 ， 单 击 地 址 栏 最 右 侧 的 “ 自 定义 及 控件 ”按钮 ， 在 下 拉 菜 单 中 选择 “工具 > 开发 人 员工 具 ” 命 
令 ， 如 图 3-96 所 示 。 或 者 按 快捷 键 Ctrl+Shift+|， 打 开 开发 者 工具 。 

接着 在 浏览 器 中 输入 http://ow.blizzard.cn/home， 可 以 看 到 Resources 选项 卡 下 面 开始 加 载 
各 种 页 面 资源 进来 。 

不 同 的 页 面 资源 被 放置 到 了 不 同 的 目录 中 ， 例 如 Images 是 页 面 中 的 图 片 ， 如 果 要 找 一 个 页 面 
中 图 片 的 链接 地 址 ， 在 这 个 目录 中 找 就 可 以 了 。 在 Other 目录 中 就 可 以 找到 目前 页 面 中 所 有 的 Flash 
元 素 的 地 址 ， 如 图 3-97 所 示 。 
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图 3-96 图 3-97 


MP4 格式 文件 即 为 要 找 的 视频 文件 。 确 定 哪个 是 想 引 用 的 Flash 地 址 ， 然 后 单 击 鼠 标 右键 ， 在 
弹出 的 菜单 中 选择 Open link In new tab 命令 ， 如 图 3-98 所 示 。 这 样 就 可 以 在 一 个 新 的 页 面 中 看 
到 这 个 Flash 视频 的 完整 URL 地 址 了 ， 如 图 3-99 所 示 。 


C (rU 42812820, 1 "Hovz 


Q [] | Elements Network Sources Timeline Pro 
> Fonts 
> Images 
> Media 
Y Other 


Copré33.g Reveal 
L] copra- 号 
Scripts 
> Stylesheets 
wwwplayoven 。 使 用 迅 二 下 载 全 部 能 接 
由 websQL 





Copy link address 





属性 (P) 
HIndexedDB 
> [E Local Storage 
b BB carcinn Grane - 
图 3-98 图 3-99 
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本 章 主要 向 用 户 讲解 了 Axure RP 的 使 用 技巧 和 设计 原则 。 在 本 章 的 前 面 两 节 向 用 户 详细 讲解 
了 原型 设计 和 移动 互联 网 原型 设计 的 原则 ， 为 项 目的 交互 式 原型 设计 制作 打下 基础 。 

另外 ， 向 用 户 介绍 了 Axure RP 一 些 操作 技巧 ， 例 如 设置 元 件 的 位 置 、 坐 标 ， 元 件 的 排列 方式 和 分 
布 方式 等 。 通 过 实例 向 用 户 讲解 了 背景 覆盖 法 、 从 Photoshop 到 Axure RP 和 在 Axure 中 使 用 Flash 的 
方法 。 


通过 学 习 使 用 Axure RP 制作 产品 原型 的 基础 知识 后 ， 接 下 来 用 户 可 以 利用 所 学 知识 制作 完成 
一 个 简单 的 产品 交互 原型 页 面 。 


EREEES 
SEAE > 教学 视频 : 视频 \ 第 3 章 \ 单 击 提交 按钮 显示 图 片 .mp4 


源 文件 : 源 文件 \ 第 3 章 \ 单 击 提交 按钮 显示 图 片 .rp 





该 实例 只 应 用 了 两 个 提交 按钮 元 件 ， 将 其 中 
的 按钮 添加 了 交互 事件 并 添加 了 链接 效果 ， 主 要 
是 为 了 让 用 户 在 不 懂 编 程 的 情况 下 实现 Web 浏 
览 效果 。 








3 jja 1 
mov BGRESCICGKEIGEEGRGREN QUIE ES MESSEN, ace — | 


PEREG. Cima 





acum, SEU] 














在 该 页 面 中 拖 彼 两 个 提交 按钮 ， 设 置 按钮 的 Æ index 页 面 下 创建 子 页 面 ， 在 该 页 面 中 拖 灸 
尺寸 为 W440、H55。 图 片 元 件 并 导入 图 片 素材 。 


111@ 

















上 ja 
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E 
本 章 将 介绍 Axure RP 8.0 从 基本 交互 到 高 级 交互 的 制作 方法 和 Ms 


技巧 ,通过 学 习 制作 交互 事件 的 方法 ， 就 算 不 是 程序 员 ， 也 可 以 做 V THRE 
出 高 保 真 的 产品 交互 原型 。 v 交互 动作 

在 Axure RP 8.0 中 ， 一 个 交互 是 由 交互 、 事 件 、 用 例 和 动作 4 交互 的 注意 事项 
个 基本 的 层面 构成 。 交 互 由 事件 触发, 再 引发 某 个 用 例 从 而 执行 动作 。 








Axure RP 能 够 让 设计 师 快速 地 制作 出 极 具 吸引 力 的 产品 原型 ， 在 目标 设备 上 将 产品 原型 转化 为 
动态 原型 ， 即 可 模拟 产品 交互 效果 。 

Axure RP 交互 是 指 把 静态 设计 图 转换 为 用 户 可 点 击 、 可 交互 的 HTML 原型 。Axure RP 可 以 
运用 自然 语言 来 创建 交互 逻辑 和 交互 命令 ， 减 少 了 复杂 的 编程 过 程 。 每 次 在 生成 HTML 原型 时 ， 
Axure RP 都 会 将 这 些 交互 转换 为 Web 浏览 器 能 够 理解 的 JavaScript 代码 。 


4.1.1 交互 事件 


ft Axure RP 中 ，“ 事 件 ” 决 定 什么 时 候 发 生 交互 动作 ， 在 Axure RP 的 检视 面板 的 “属性 ” 
标签 内 会 看 到 3 种 事件 , 如 图 4-1 所 示 。 单 击 “ 更 多 事件 ”选项 , 会 看 到 更 多 的 事件 , 如 图 4-2 所 示 。 


































| ub 页面 
| me Ex ECIEN RI 
4258 窗口 向 下 滚动 时 
ERU 页 面包 标 单 去 时 
"p mnaweue TURNER: 
= gne TUEegxems 
1 | mme rat 

页 面 说 明 


页 面 按键 松 开 时 
语 适 应 视图 改变 时 


4-1 图 4-2 
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4.1.2 ”交互 的 位 置 


Axure RP 的 所 有 元 件 都 可 以 创建 交互 动作 ， 如 矩形 元 件 、 动 态 面板 元 件 等 。 页 面 或 母 版 也 可 以 
创建 交互 动作 ， 在 “检视 : 页 面 ”面板 的 “属性 ”标签 下 可 以 创建 页 面 或 母 版 的 交互 事件 ， 如 图 4-3 
所 示 。 在 “检视 : 某 元 件 ” 面 板 的 “属性 ”标签 下 可 以 创建 元 件 的 交互 事件 ， 如 图 4-4 所 示 。 


Lu 


4 ZH 





图 4-3 图 4-4 


4.1.3 ”交互 的 动作 


Axure RP 把 要 发 生 的 事情 命名 为 动作 ， 动 作 能 够 影响 交互 的 结果 。 例 如 在 页 面 载 入 时 ， 将 一 个 
动态 面板 设 定 为 某 一 指定 的 状态 ， 当 单 击 某 一 个 按钮 时 ， 会 载 入 到 另 一 个 页 面 。 
此 外 ，Axure RP 交互 可 以 由 条 件 罗 辑 进行 引导 ， 当 然 是否 使 用 条 件 是 可 选 的 。 


有 时 一 个 时 间 可 以 触发 多 条 可 选 事件 ， 每 个 事件 都 有 各 自 特 定 的 用 例 。 触 发 该 事件 
的 关键 在 于 控制 它 的 触发 条 件 。 





Axure RP 由 两 种 事件 触发 ， 即 页 面 或 母 版 的 交互 事件 和 元 件 的 交互 事件 。 
页 面 或 母 版 的 交互 事件 : 这 些 事件 可 以 自动 触发 ， 例 如 当 页 面 载 入 时 或 者 在 用 户 做 了 某 个 动作 后 
触发 滚动 屏 。 


元 件 的 交互 事件 : 这 些 事件 一 般 是 用 户 直接 触发 的 ， 例 如 单 击 按钮 或 者 滑动 屏幕 产生 一 系列 的 
事件 。 


4.2.1 页 面 事件 的 发 生 


在 原型 中 创建 的 交互 命令 是 由 浏览 器 来 执行 的 ， 例 如 页 面 载 入 时 事件 流程 图 如 图 4-5 所 示 。 


Qu 
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。 ”如 果 是 首次 启动 原型 ， 一 个 页 面 链 接 到 另 一 个 页 面 ， 就 会 自动 请 求 浏览 器 加 载 一 个 页 面 。 

e ”浏览 器 首先 会 检查 页 面 中 的 页 面 加 载 事 件 ， 既 可 以 是 所 要 加 载 的 页 面 ， 也 可 以 是 该 页 面 中 所 
包含 的 母 版 ， 或 者 两 者 共同 存在 。 

。 ”如 果 在 一 个 页 面 加 载 时 进行 交互 ， 浏 览 器 首先 将 页 面 的 交互 处 理 完成 后 ， 再 处 理 母 版 的 


交互 。 


e ”如 果 页 面 加 载 事 件 中 包括 条 件 ， 浏 览 器 将 根据 条 件 判断 并 执行 相应 的 动作 。 如 果 页 面 加 载 事 
件 没有 条 件 ， 浏 览 器 会 执行 动作 。 
每 次 交互 最 后 都 会 泻 染 被 请 求 的 页 面 。 


页 面 加 载 请 求 














p- Pp 
一” 是否 有 是 否 有 
一 一 》 
el 





> 不 做 任何 动作 


图 4-5 


4.2.2 ”页 面 事件 


页 面 事件 包括 以 下 事件 ， 如 图 4-6 所 示 。 
RARAN: 页 面 加 载 完成 之 后 触发 的 事件 ， 可 以 用 来 设置 空间 和 


参数 的 初始 状态 等 。 


窗口 调整 尺寸 时 : 页 面 尺寸 发 生变 化 时 触发 的 事件 。 例 如 当 用 户 
缩小 页 面 时 ， 对 页 面 布 局 进行 一 些 调整 。 想 象 一 下 ， 类 似 interest. 
com 一 样 的 页 面 ， 当 用 户 修改 页 面 的 宽度 时 ， 页 面 的 布局 就 会 发 生 


变化 。 


页 面 滚动 时 : 当 页 面 滚动 时 触发 的 事件 。 我 们 能 想到 的 最 直接 的 页 
面 滚动 时 触发 的 事件 就 是 滚动 的 时 候 动态 加 载 页 面 了 。 


窗口 向 上 滚动 时 : 
窗口 向 下 滚动 时 : 
页 面 鼠 标 单 击 时 : 
页 面 鼠 标 双击 时 : 
页 面 鼠 标 右 击 时 : 
页 面 鼠 标 移动 时 : 
页 面 按键 按 下 时 : 
页 面 按键 松 开 时 : 


当 页 面 中 的 窗口 向 上 滚动 时 触发 事件 。 
当 页 面 中 的 窗口 向 下 滚动 时 触发 事件 。 
当 页 面 被 单 击 时 触发 事件 。 
当 页 面 被 双击 时 触发 事件 。 
当 页 面 被 右 击 时 触发 事件 。 
当 页 面 被 移动 时 触发 事件 。 
当 用 户 在 页 面 上 按 下 按键 时 触发 事件 。 
当 用 户 在 页 面 上 松 开 按键 时 触发 事件 。 


自 适应 视图 改变 时 : 当 移 动 端 手 机 从 竖 屏 浏览 变 为 横 屏 浏览 时 触发 


事件 。 
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加 载 QQ 邮箱 页 面 


实例 UEM 
教学 视频 : 视频 \ 第 4 章 \ 加 载 QQ 邮箱 页 面 .mp4 源 文件 : OUA E 4 S UOTE QQ 邮箱 页 面 .mp 
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实例 分 析 : D T 
本 实例 主要 讲解 了 页 面 加 载 事件 
的 应 用 。 首 先 绘制 完成 邮箱 的 登录 界 NEUES 
面 、 加 载 界面 和 登录 成 功 ， 然 后 通过 E oai x m 
添加 事件 实现 QQ 邮箱 登录 的 页 面 交 | m. = 1 
| 




















制作 步骤 : 


执行 “文件 > 新 建 ”命令 ， 新建 一 个 项 目 文档 ， 如 图 4-7 所 示 。 将 矩形 1 元 件 拖 电 到 index 
页 面 中 ， 设 置 元 件 的 坐标 为 X450、Y360， 尺 寸 为 W305、H12， 并 将 其 重 命名 为 “ 蓝 色 矩形 ”， 
效果 如 图 4-8 所 示 。 


xura RP Pro 801 3 
XH. HK WE MAD» Aue Xen. BT 
Bw [RR x. 00% -| 
m 可 E! a 
| 区 = 








amam o - RO 
L* s 











图 4-7 4-8 


设置 和 矩形 1 元 件 的 填充 样式 为 #FFFFFF， 边 框 颜色 为 #A1A9B7， 如 图 4-9 所 示 ， 效 果 如 
4-10 所 示 。 
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图 4-9 图 4-10 


将 一 个 动态 面板 元 件 拖 入 页 面 ， 将 此 元 件 放置 在 矩形 1 元 件 上 ， 设 置 动态 面板 元 件 的 坐标 
为 X32、Y52， 尺 寸 为 W300、H8， 如 图 4-11 所 示 。 双 击 动态 面板 元 件 打 开 “ 动 态 面板 管理 器 ” 
对 话 框 ， 在 该 对 话 框 中 双击 State1 状态 ， 在 该 状态 页 面 下 拖 入 一 个 矩形 1 元 件 ， 设 置 和 矩形 的 坐标 为 
XO. YO, 尺寸 为 W300、H8， 并 填充 颜色 为 #D4E4FF， 效 果 如 图 4-12 所 示 。 


HAS (动态 面板 ) / State1 (index) index 


Be = Ed : 
图 4-11 4-12 


在 该 页 面 中 再 次 拖 入 一 个 动态 面板 元 件 ， 重 命名 为 “进度 ”， 设 置 坐标 为 XO0、Y0， 尺 寸 为 
W300. H8, 双击 进度 动态 面板 元 件 打开 “动态 面板 管理 器 ”对 话 框 ， 在 该 对 话 框 中 双击 State1 状态 ， 
在 该 状态 页 面 下 拖 由 一 个 矩形 1 元件， 设置 矩形 的 坐标 为 XO0、Y0， 尺 寸 为 W300、H8， 并 填充 颜 
色 为 #FFFFF， 边 框 为 无 ， 效 果 如 图 4-13 所 示 。 元 件 管理 面板 如 图 4-14 所 示 。 

















Outline: YQ 
[3 index 
= EE) 
4 dp ( 动 太 面 板 ) 
A State1 
一 08) 
4 gy 进度 (动态 面板 ) 
4 A State1 
一 68) 
BA 进度 | State1 (index) (动态 画板 )/ State (index) index 
io 100 200 300 
e MÁLLLLLLg-—————————H 
图 4-13 图 4-14 


返回 index 页 面 ， 在 该 页 面 中 拖 入 一 个 文本 标签 元 件 ， 设 置 元 件 的 位 置 是 X30、Y20， 尺 寸 
为 X280、Y19， 如 图 4-15 所 示 。 设 置 字体 为 Arial， 字 体 大 小 为 16 ， 字 体 颜色 为 #333333， 字 体 
样式 为 粗 体 ， 显 示 文字 为 “页 面 加 载 中 ， 请 稍 等 …”， 效果 如 图 4-16 所 示 。 
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双击 “页 面 载 入 时 ”事件 ， 打 开 “ 用 例 编辑 ”对 话 框 ， 添 加 “移动 ”动作 ， 如 图 4-17 所 示 。 
继续 添加 动作 并 配置 动作 ， 如 图 4-18 所 示 。 


























和 om —- e m — 
du 
acm aa 
Am d 
F smaa omoran 00 5 em 
Ld - 
exe 
n—— 
t.e 
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cmm 3| ma [o ee 
mom 
|o ms 
图 4-17 图 4-18 


执行 "发布 > 预览 ”命令 , 预览 效果 , 如 图 4-19 所 示 。 将 index 页 面 重 命名 为 “进度 ”， 
将 page1 重 命名 为 “登录 ”， 将 “登录 ”移动 到 “进度 ”页 面 的 上 面 ， 页 面 管理 面板 如 图 4-20 
所 示 。 






























































R aa 
[ 登录 
aD em 
[* page2 
Mamih, idis D page3 
|| 
图 4-19 4-20 


双击 “登录 ” 页面, ‘SF Wunieg9 — EH, EI 4-21 所 示 。 双击 元 件 , 选择 “ 素 
材 \ 第 4 章 \006.jpg” 图 片 ， 图 片 的 位 置 为 X0、Y0， 如 图 4-22 所 示 。 
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QQ 邮箱 ， 常 联系 ! 





图 4-21 图 4-22 


继续 拖 昌 热 区 元 件 到 页 面 编辑 区 内 ， 将 该 元 件 覆 盖 在 登录 按钮 上 ， 如 图 4-23 所 示 。 为 元 件 
添加 “鼠标 单 击 时 ”事件 ， 如 图 4-24 所 示 。 












































ERME n 
Gh X Name) 
428 sem. |- 

C meamea 

9 p "R mreta 十 | 

E i "R gui 

更 多 事件 -> 
5728 注册 新 帐号 GUER 
4 
4-23 4-24 


打开 “用 例 编辑 ”对 话 框 , 添加 “当前 窗口 ” 动作 , 在 配置 动作 中 选择 “进度 ”页 面 , 如 图 4-25 
所 示 。 执 行 “发 布 > 预览 ”命令 ， 查 看 效果 ， 如 图 4-26 所 示 。 用 户 单 击 “ 登 录 ” 按 钮 ， 可 以 链接 到 
页 面 加 载 中 。 
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将 page2 页 面 重 命名 为 “邮箱 ”， 将 该 页 面 移动 到 所 有 页 面 的 下 面 ， 双 击 该 页 面 ， 拖 入 一 
个 图 片 元 件 并 导入 图 片 ， 图 片 效 果 如 图 4-27 所 示 。 返 回 “进度 ”页 面 ， 继 续 为 页 面 添加 如 图 4-28 
所 示 的 动作 。 
























































图 4-28 
执行 “文件 > 保存 ”命令 ， 将 项 目 保存 。 执 行 “ 预 览 ”命令 ， 用 户 可 以 查看 效果 ， 如 图 4-29 
和 图 4-30 所 示 。 
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4.2.8 元 件 事件 


单 击 鼠 标 事件 ,是 通过 单 击 鼠 标 或 者 手指 触 磁 触发 事件 ,是 最 基本 的 交互 事件 。 在 Axure RP 中 ， 
不 同 的 元 件 有 不 同 的 交互 事件 。Axure RP 元 件 事件 的 运作 过 程 ， 如 图 4-31 所 示 。 
® ”元 件 的 交互 是 从 一 个 用 户 触发 事件 开始 ， 不 同 的 元 件 有 不 同 的 交互 响应 。 例 如 单 击 按钮 之 前 ， 
用 户 需 要 将 鼠标 停放 在 按钮 上 并 且 按 钮 样式 发 生变 化 ， 响 应 当 鼠 标 移入 时 的 事件 。 
。 浏览 器 会 检查 元 件 事 件 是 否 存在 条 件 ， 浏 览 器 会 首先 判断 条 件 是 否 满足 条 件 ， 如 果 符 合 条 件 ， 
浏览 器 才 会 执行 相应 的 动作 。 如 果 不 符合 条 件 ， 浏 览 器 就 会 直接 执行 其 他 动作 。 


Q12 


$49 交互 事件 
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在 浏览 器 中 更 新 
7m 








图 4-31 





元 件 的 交互 事件 和 动态 面板 的 交互 事件 ， 如 图 4-32 所 示 。 














n 








4-32 








鼠标 单 击 时 : 当 用 户 单 击 页 面 中 的 某 个 元 素 时 ， 这 一 事件 将 触发 指定 的 动作 。 

状态 改变 时 : 动态 面板 可 能 有 多 个 状态 ， 这 个 事件 可 以 在 动态 面板 切换 状态 时 触发 指定 动作 。 
拖 动 开始 时 : 这 个 事件 能 准确 定位 于 用 户 开 始 拖 动 某 个 动作 面板 的 那 一 瞬间 。 

拖 动 时 : 这 个 事件 在 拖 动 动态 面板 的 这 一 段 时 间 内 可 以 持续 发 生 。 

拖 动 结束 时 : 这 个 事件 能 准确 定位 于 用 户 结束 拖 动 某 个 动作 面板 的 那 一 瞬间 。 也 就 是 说 ， 可 以 验 


证 用 户 是 否 将 元 件 放 在 正确 的 位 置 。 
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鼠标 双击 时 : 当 用 户 双击 页 面 上 某 个 元 素 时 ， 这 一 事件 将 触发 指定 的 动作 。 

鼠标 右 击 时 : 当 用 户 在 某 个 元 素 上 单 击 鼠 标 右键 时 ， 这 一 事件 将 触发 指定 的 动作 。 

鼠标 按 下 时 : 当 单 击 某 个 元 素 但 没有 松 开 鼠标 时 ， 这 一 事件 将 触发 指定 的 动作 。 

鼠标 松 开 时 : 当 鼠 标 指针 被 释放 时 ， 这 一 事件 将 触发 指定 的 动作 。 

鼠标 移动 时 : 当 移 动 鼠 标 指针 时 ， 这 一 事件 将 触发 指定 的 动作 。 

鼠标 移入 时 : 当 鼠 标 指针 移入 某 个 元 素 时 ， 这 一 事件 将 触发 指定 的 动作 。 

鼠标 移出 时 : 当 鼠 标 指针 移出 某 个 元 素 时 ， 这 一 事件 将 触发 指定 的 动作 。 

鼠标 停放 时 : 当 鼠 标 指针 停放 在 某 个 元 素 上 时 ， 这 一 事件 将 触发 指定 的 动作 。 这 是 有 用 的 自 定义 
提示 。 

鼠标 长 按时 : 适用 于 触摸 屏 ， 用 于 当 单 击 某 个 元 素 并 长 按时 。 

按键 按 下 时 当 在 键盘 上 按 下 某 个 键盘 时 , 这 一 事件 将 触发 指定 的 动作 。 这 个 事件 适用 于 任何 元 件 ， 
但 是 动作 只 会 在 获得 焦点 的 元 件 上 生效 。 

按键 松 开 时 : 当 松 开 键 盘 上 某 个 按 下 的 按键 时 ， 这 一 事件 将 触发 指定 的 动作 。 

移动 时 : 当 相应 的 元 件 在 移动 时 ， 这 一 事件 将 触发 指定 的 动作 。 

显示 时 : 当 相应 的 元 件 被 切换 成 显示 时 ， 这 一 事件 将 触发 指定 的 动作 。 

隐藏 时 : 当 相 应 的 元 件 被 切换 成 隐藏 时 ， 这 一 事件 将 触发 指定 的 动作 。 

向 上 拖 动 结束 时 : 当 从 下 往 上 滚动 结束 时 ， 这 一 事件 将 触发 指定 的 动作 。 

向 下 拖 动 结束 时 : 当 从 上 往 下 滚动 结束 时 ， 这 一 事件 将 触发 指定 的 动作 。 

向 上 滚动 时 : 当 向 上 滚动 时 ， 这 一 事件 将 触发 指定 的 动作 。 

向 下 滚动 时 : 当 向 下 滚动 时 ， 这 一 事件 将 触发 指定 的 动作 。 

调整 尺寸 时 : 当 检 测 到 相关 的 动态 面板 尺寸 变化 时 ， 这 一 事件 将 触发 指定 的 动作 。 

获取 焦点 时 : 当 元 件 变 成 焦点 状态 时 ， 这 一 事件 将 触发 指定 的 动作 。 

失去 焦点 时 : 当 元 件 失 焦 时 ， 这 一 事件 将 触发 指定 的 动作 。 

选中 改变 时 : 这 个 事件 只 用 于 下 拉 列 表 中 ， 通 常 配合 这 个 条 件 使 用 一 一 当 想 要 选中 某 个 选项 ， 触 
发 改变 线 框图 内 的 动作 时 ， 可 以 使 用 这 个 事件 。 

选中 时 : 这 个 事件 只 能 用 于 单 选 按钮 或 者 复 选 框 元 件 上 。 当 选中 某 个 选项 触发 改变 线 框图 内 容 的 
动作 时 ， 可 以 使 用 这 个 事件 。 

未 选中 时 : 当 没 有 选中 某 个 选项 触发 改变 线 框图 内 容 的 动作 时 ， 可 以 使 用 这 个 事件 。 


动态 面板 创建 轮 
实例 使 用 动态 面板 创建 轮 播 图 


教学 视频 : 视频 \ 第 4 章 \ 使 用 动态 面板 创建 轮 播 图 .mp4 
14 源 文件 : 源 文件 \ 第 4 章 \ 使 用 动态 面板 创建 轮 播 图 .rp 





实例 分 析 : 

本 实例 主要 制作 页 面 图 片 轮 播 的 
交互 效果 ， 在 制作 时 主要 使 用 动态 面 
板 元 件 ， 首 先 在 动态 面板 元 件 上 添加 
图 片 元 件 ， 然 后 添加 “鼠标 移入 时 ” 
事件 ,实现 图 片 相互 交替 的 变换 效果 。 

















Oiz 


制作 步骤 : 


执行 “文件 > 新 建 ”命令 ， 新 建 一 个 项 目 文档 ， 如 图 4-33 所 示 。 将 一 个 动态 面板 元 件 拖 存 
到 index 页 面 中 ， 设 置 元 件 的 坐标 为 X20、Y20， 尺 寸 为 W515、H386， 重 命名 元 件 为 “ 轮 播 图 ”， 
如 图 4-34 所 示 。 



































动态 面板 的 具体 尺寸 与 制作 的 页 面 和 图 片 有 关 ， 也 可 以 自行 修改 。 


双击 页 面 编辑 区 的 动态 面板 元 件 , 打开 “动态 面板 状态 管理 ”对 话 框 , 如 图 4-35 所 示 。 单 击 “ 添 
加 ”按钮 ， 添 加 4 个 状态 ， 如 图 4-36 所 示 。 
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图 4-35 图 4-36 


在 “动态 面板 状态 管理 ”对 话 框 中 ， 默 认 情况 下 已 经 添加 了 一 个 State1， 只 需要 添 
加 4 个 就 可 以 了 。 现 在 有 5 个 状态 ， 最 终 的 效果 会 显示 有 5 个 不 同 的 图 片 在 切换 。 
单 击 页 面 编辑 面板 中 的 “动态 面板 ”， 可 以 看 到 “ 轮 播 图 ”动态 面板 下 有 5 个 状态 页 面 ， 如 


4-37 所 示 。 双 击 State1， 这 时 在 页 面 编辑 区 内 会 出 现 一 个 名 称 为 “ 轮 播 图 /State1 (index) ” 
状态 页 面 ， 如 图 4-38 所 示 。 
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图 4-37 图 4-38 


“ 轮 播 图 /State1 ( index ) ”不 是 真正 的 页 面 ， 只 是 一 个 状态 页 面 ， 不 会 出 现在 页 
面 管理 器 中 。 


在 “ 轮 播 图 /State1 (index) ”状态 页 面 下 ， 会 看 到 蓝 色 的 虚线 ， 如 图 4-39 所 示 。 在 该 页 






-E | 


| cma 2-0 e 








cs BACKUP (F) 




















图 4-39 图 4-40 


单 击 “ 打 开 ” 按 钮 导入 图 片 ,调整 图 片 位 置 在 蓝 色 的 虚线 框 内 , 坐标 设置 为 X0、Y0, 如 图 4-41 所 示 。 
在 元 件 管理 区 内 双击 State2， 同 样 打开 新 的 “ 轮 播 图 /State2 (index) ”状态 页 面 ， 如 图 4-42 所 示 。 


这 里 创建 的 动态 面板 和 图 片 大 小 是 一 样 的， 所 以 图 片 刚好 在 蓝 色 虚 线 框 上 。 


使 用 相同 的 方法 添加 图 片 , 并 将 State3、State4 和 State5 也 添加 图 片 , 效果 如 图 4-43 所 示 。 
将 状态 页 面 制作 完成 后 ， 最 终 的 动态 面板 会 由 5 个 状态 页 面 组 成 , 将 页 面 编辑 区 的 5 个 状态 页 面 关闭 ， 
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图 4-43 图 4-44 


在 index 页 面 中 显示 的 State1 图 片 ， 是 动态 面板 区 域 中 最 上 面 的 状态 页 面 内 容 ， 如 
4-45 所 示 。 如 果 想 要 在 动态 面板 上 显示 其 他 图 片 ， 可 以 选中 图 片上 下 拖 动 调整 
顺序 ， 如 图 4-46 所 示 。 
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f£ index REAS 5 个 图 片 元 件 ， 并 分 别 命名 为 “图 片 1” 至 “图 片 5”， 并 导入 图 片 ， 
将 图 片 排 列 在 动态 面板 下 ， 如 图 4-47 所 示 。 选 中 图 片 1 元件， 双击 交互 事件 中 的 “鼠标 移入 时 ”， 
打开 “用 例 编辑 ”对 话 框 ， 在 对 话 框 中 添加 动作 ， 如 图 4-48 所 示 。 
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图 4-47 图 4-48 
使 用 相同 的 方法 将 “图 片 2 ”至 “图 片 5” 元 件 也 添加 相同 的 事件 , 如 图 4-49 所 示 。 执行 “ 预 
览 ”命令 ， 预 览 项 目 ， 在 浏览 器 中 图 片 可 以 进行 切换 ， 如 图 4-50 所 示 。 
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图 4-49 图 4-50 


购买 课程 
教学 视频 : 视频 \ 第 4 章 \ 购 买 课程 .mp4 源 文件 : 源 文 件 \ 第 4 章 \ 购 买 课程 .rp 


实例 分 析 : 

本 实例 主要 是 在 下 拉 列 表 元 件 上 
应 用 了 “选项 改变 时 ”事件 ， 添 加 了 
显示 、 设 置 文本 等 动作 ， 实 现在 下 拉 
列表 中 选择 选项 ， 并 显示 结果 的 页 面 
交互 效果 。 


Q6 


制作 步骤 : 


执行 “文件 > 新 建 ”命令 ， 新 建 一 个 项 目 文档 ， 如 图 4-51 所 示 。 拖 奥 一 个 和 矩形 1 元 件 到 
index 页 面 中 ， 设 置 元 件 的 坐标 为 X200、Y150， 尺 寸 为 W350、H300， 将 元 件 重 命名 为 “背景 ”， 
如 图 4-52 所 示 。 


ET 








x|20 |y: |w|so j|ram|mo | 
图 4-51 图 4-52 


设置 矩形 填充 颜色 为 #FF9900, 并 将 其 锁定 , 如 图 4-53 所 示 。 继续 拖 入 一 个 文本 标签 元 件 ， 
设置 文本 标签 的 位 置 为 X289、Y210, 输入 文本 为 “选择 需要 购买 的 课程 ”， 设 置 文本 的 字体 为 宋体 ， 
样式 为 粗 体 ， 字 号 为 18 号 ， 将 文本 重 命名 为 “购买 课程 ”， 如 图 4-54 所 示 。 


图 4-53 图 4-54 





继续 拖 入 一 个 下 拉 列 表 元 件 ， 调 整合 适 的 位 置 ， 重 命名 为 “选择 课程 ”， 如 图 4-55 所 示 。 
双击 下 拉 列 表 元 件 ， 弹 出 “编辑 列表 选项 ”对 话 框 ， 如 图 4-56 所 示 。 
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f 4-55 图 4-56 


在 “编辑 列表 选项 ”对 话 框 中 添加 列表 ， 如 图 4-57 所 示 。 单 击 “ 确 定 ”按钮 ， 页 面 编辑 区 
效果 如 图 4-58 所 示 。 























图 4-58 

继续 拖 入 一 个 文本 标签 元 件 , 输入 文字 为 “您 选择 的 课程 是 : ”, 将 该 文本 标签 重 命名 为 “ 选 
择 课 程 ”， 如 图 4-59 所 示 。 再 次 拖 入 一 个 文本 标签 元 件 ， 将 该 文本 重 命名 为 “结果 ”， 如 图 4-60 
所 示 。 


4-59 图 4-60 


将 该 文本 标签 隐藏 ， 如 图 4-61 所 示 。 选 中 下 拉 列 表 元 件 ， 双 击 交互 事件 中 的 “选项 改变 时 ” 
事件 ， 打 开 “ 用 例 编辑 ”对 话 框 ， 在 对 话 框 中 添加 “设置 文本 ”动作 ， 如 图 4-62 所 示 。 
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4-61 图 4-62 
在 “配置 动作 ”下 设置 参数 , 如 图 4-63 所 示 。 添加 “显示 ”动作 , 在 “配置 动作 ”下 设置 参数 ， 
如 图 4-64 所 示 。 
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图 4-64 
单 击 “确定 ”按钮 ， 效 果 如 图 4-65 所 示 。 执 行 “预览 ”命令 ， 查 看 效果 ， 如 图 4-66 所 示 。 





























图 4-65 
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Axure RP 用 例 是 指 在 同一 个 任务 或 事件 内 创建 不 同 流程 的 一 种 方式 。 不 管 是 页 面 或 是 母 版 的 页 
面 加 载 事件 ， 还 是 元 件 事件 ， 用 例 的 使 用 方式 通常 情况 下 有 两 种 。 
。 ”每 个 交互 事件 只 包含 一 个 用 例 ， 用 例 中 包含 一 个 或 多 个 动作 ， 如 图 4-67 所 示 。 
。 ”每 个 交互 事件 包含 多 个 用 例 ， 每 个 用 例 中 包含 一 个 或 多 个 动作 。 添 加 条 件 ， 决 定 什么 情况 下 
应 该 执行 哪 种 用 例 。Axure RP 用 例 就 像 存放 动作 的 容器 ， 能 够 模拟 不 同 的 交互 流程 。 原 型 
的 保 真 度 越 高 ， 多 个 用 例 的 交互 就 会 越 多 。 
如 图 4-68 所 示 是 Axure RP 交互 和 所 包含 用 例 的 结构 关系 图 。 


图 4-67 图 4-68 





4.3.1 用 例 编辑 器 






































图 4-69 


用 例 名 称 : 描述 说 明 这 个 用 例 是 做 什么 的 。 默认 的 描述 就 是 Case1， 在 使 用 时 不 会 去 修改 。 
动作 : Axure RP 的 动作 分 为 5 类 ， 在 后 面 的 章节 向 用 户 详细 讲解 。 
组 织 动作 : 在 组 织 动作 中 可 以 看 到 所 有 添加 的 动作 ， 这 里 可 以 删除 动作 ， 也 可 以 调整 动作 的 顺序 。 
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Axure RP 会 按照 动作 由 上 到 下 的 顺序 执行 。 如 果 希 望 某 个 动作 优先 执行 ， 可 以 选中 要 调整 的 动作 ， 
接 拖 钨 到 靠 前 的 位 置 即 可 。 
配置 动作 : 在 配置 动作 中 可 以 针对 有 些 需 要 设计 参数 的 动作 设置 参数 。 


4.3.2 条 件 设立 


在 前 面 用 户 已 经 了 解 条 件 设 立 是 控制 动作 发 生 的 时 机 ， 下 面 对 “ 条 件 设 立 ” 对 话 框 具体 讲解 一 下 。 
双击 “添加 条 件 ” 选 项 ， 打 开 “ 条 件 设 立 ”对 话 框 ， 如 图 4-70 所 示 。 



































确定 条 件 之 间 的 逻辑 关系 
用 来 进行 巡 辑 判断 的 值 
确定 变量 或 元 件 名 称 输入 框 
逻辑 判断 的 运算 符 用 来 选择 被 比较 的 值 
逻辑 描述 框 


1. 确定 条 件 之 间 的 逻辑 关系 (第 1 部 分 ) 

单 击 “ 全 部 ”后 面 的 向 下 箭头 ， 用 户 可 以 看 到 条 件 逻 辑 关系 中 有 “全 部 ”和 “任何 ”两 种 关系 。 

全 部 : 必须 同时 满足 所 有 条 件 编辑 器 中 的 条 件 ， 用 例 才 有 可 能 发 生 。 

任何 : 只 要 满足 条 件 编辑 器 中 任何 一 个 条 件 ， 用 例 就 会 发 生 。 

2. 用 来 进行 逻辑 判断 的 值 (第 2 部 分 ) 

在 此 选项 的 下 拉 菜 单 中 会 有 14 种 选择 值 的 方式 ， 如 图 4-71 所 示 。 

值 : 自 定 义 变量 值 。 

变量 值 : 能 够 根据 一 个 变量 的 值 来 进行 逻辑 判断 。 例 如 可 以 添加 一 个 变 
量 叫 作 日 期 并 且 判 断 只 有 当日 期 为 2 月 8 日 的 时 候 ， 才 发 生 Happy Birthday 
的 用 例 。 

TRAKE: 在 验证 表单 的 时 候 ， 要 验证 用 户 选择 的 用 户 名 或 者 是 密码 
长 度 。 

元 件 文字 : 用 来 获取 某 个 文本 输入 框 中 文本 的 值 。 


符合 全 部 


Y 以 下 条 件 


元 件 文字 长 度 : 与 变量 值 长 度 是 相似 的 ， 只 是 这 里 判断 的 是 某 个 元 件 的 文 
本 长 度 。 

被 选项 : 根据 页 面 中 某 个 复 选 框 元 件 是 否 被 选中 来 进行 逻辑 判断 。 

面板 状态 : 某 个 动态 面板 的 状态 。 根 据 动 态 面板 的 状态 来 判断 是 否 执行 某 
个 用 例 。 

指针 : 通过 当前 的 指针 获取 鼠标 的 当前 位 置 ， 实 现 鼠 标 拖 鬼 的 相关 功能 。 
根据 拖 息 的 位 置 来 判断 是 否 要 执行 某 些 操作 。 








元 件 范围 : 为 元 件 事件 添加 条 件 事件 指定 的 范围 。 
自 适 应 视图 : 根据 一 个 元 件 所 在 的 面板 进行 判断 。 
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3. 确定 变量 或 元 件 名 称 (第 3 部 分 ) 

变量 或 元 件 的 名 称 是 根据 前 面 的 选择 方式 来 确定 的 .如果 前 面 选择 的 逻辑 判断 值 是 “变量 值 " 选项 ， 
那么 变量 或 元 件 名 称 就 是 选择 到 底 哪个 是 OnLoadVariable, 也 可 以 添加 新 的 变量 , 如 图 4-72 所 示 。 

4. 逻辑 判断 的 运算 符 (第 4 部分) 

可 以 选择 等 于 、 大 小 或 小 于 等 条 件 ， 如 图 4-73 所 示 。 要 注意 的 是 “包含 ”和 “不 包含 ”选项 ， 
也 就 是 可 以 判断 包含 关系 。 


[ae [= 


OnLoadVariable bs 
| aa 上 
新 建 … 不 包 会 


图 4-72 图 4-73 


5. 用 来 选择 被 比较 的 值 (第 5 部 分 ) 

这 部 分 的 值 是 用 来 和 第 2 部 分 中 的 值 做 比较 。 选 择 的 方式 和 第 2 部 分 一 样 。 例 如 选择 比较 两 个 变 
量 ， 刚 才 选 择 了 第 1 个 变量 的 名 称 ， 现 在 就 要 选择 第 2 个 变量 的 名 称 。 

6. 输入 框 ( 第 6 部 分 ) 

如 果 在 前 面 第 5 部 分 选择 的 是 “ 值 ”， 就 要 在 输入 框 中 输入 具体 的 值 。 

7. 逻辑 描述 框 (第 7 部 分 ) 


Axure RP 会 根据 用 户 在 前 面 几 部 分 中 的 输入 生成 一 段 描述 ， 让 用 户 判断 条 件 是 否 正确 。 

国 : 用 户 在 输入 值 的 时 候 ， 可 以 使 用 一 些 常规 的 函数 ， 如 获取 日 期 、 截 断 和 获取 字符 串 、 预 设置 
参数 等 。 这 部 分 很 少 使 用 。 

E: 新 增 条 件 。 

[x]: 删除 条 件 。 





在 文本 框 中 输入 文字 


教学 视频 : 视频 \ 第 4 章 \ 在 文本 框 中 输入 文字 
源 文件 : 源 文件 \ 第 4 章 \ 在 文本 框 中 输入 文字 .mp 





实例 分 析 : 

本 实例 主要 是 在 按钮 元 件 上 应 用 
了 “鼠标 单 击 时 ”事件 , 添加 了 显示 、 
设置 文本 等 动作 。 其 难点 是 在 一 个 事 
件 上 同时 设置 两 个 用 例 ， 用 例 的 条 件 
设立 虽然 相似 ， 但 是 效果 完全 不 同 。 
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制作 步骤 : 


执行 “文件 > 新 建 ” 命 令 ， 新建 一 个 项 目 文档 ， 如 图 4-74 所 示 。 将 一 个 矩形 3 TERE 
index 页 面 中 ， 设 置 元 件 的 坐标 为 X320、Y190， 尺 寸 为 W480、H272， 将 元 件 重 命名 为 “背景 ”， 


o 
x|10 Jy so 国人 古本 zz 


4-74 图 4-75 
拖 入 一 个 文本 标签 元 件 ， 设 置 文本 标签 的 位 置 为 X369、Y318， 输 入 文本 为 “请 输入 内 容 ”， 设 
置 文本 的 字体 为 默认 字体 ， 字 号 为 20 号 ， 将 元 件 重 命名 为 “标题 ”， 如 图 4—76 所 示 。 拖 入 一 个 文本 框 元 件 ， 
设置 文本 框 的 位 置 为 X481、Y318， 尺 寸 为 W210、H25， 将 元 件 重 命名 为 “输入 内 容 ”， 如 图 A-77 所 示 。 














dis Beg 请 输 和 内容 8 3 


图 4-76 图 4-77 
拖 入 一 个 提交 按钮 元 件 ， 设 置 按 钮 的 大 小 为 W80、H25， 将 按钮 重 命名 为 “提交 按钮 ”， 
如 图 4-78 所 示 。 继 续 拖 入 一 个 文本 标签 ， 设置 文 字 为 黑体 ， 颜 色 为 #FF0000， 字 号 为 14， 输 入 文 
本 为 “请 在 文本 框 中 输入 内 容 ”， 将 该 标签 设置 为 隐藏 ， 并 重 命名 为 “弹出 显示 ”， 如 图 4-79 所 示 。 
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图 4-78 4-79 
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在 选中 庶 草 的 情况 下 ， 隐 藏 状态 下 的 元 件 以 淡 黄 色 显 示 。 


选中 提交 按钮 元 件 ， 双 击 交 互 事件 中 的 “鼠标 单 击 时 ”事件 ， 打 开 “ 用 例 编辑 ”对 话 框 ， 在 
对 话 框 中 双击 组 织 动 作 下 的 Case1 选项 , 如 图 4-80 所 示 。 弹出 “条 件 设立 ”对 话 框 , 如 图 4-81 所 示 。 
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图 4-81 


用 户 也 可 以 选中 Case1 后 ， 单 击 “ 添 加 条 件 ” 选 项 ， 弹 出 “条 件 设立 ”对 话 框 。 


在 “条 件 设立 ”对 话 框 中 设置 参数 ， 如 图 4-82 所 示 。 单 击 “ 确 定 ” 按 钮 ， 返 回 “ 用 例 编辑 ” 
对 话 框 ， 如 图 4-83 所 示 。 







































































mm má me 
deu con on 
Coi E 2 Bes 
. - prs 
mee “以 Fg 件 mex mei 
d 
man 
zess wa E Li x x iem 
€ 
d 
suma 
e 
Qm d 
UT 
ES 
E armes 
p 
PIFF ENG =: ps 
p 
z= 
] u—— 
Cmm Jom ñ e] 
图 4-82 图 4-83 


添加 “显示 ”动作 , 配置 动作 如 图 4-84 所 示 。 继 续 添加 “设置 文本 ”动作 并 配置 动作 , 如 图 4-85 
所 示 。 

单 击 “ 确 定 ” 按 钮 ， 返 回 页 面 编辑 区 ， 页 面 效 果 如 图 4-86 所 示 。 执 行 “预览 ”命令 ， 预 览 
效果 如 图 4-87 所 示 。 
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4-86 图 4-87 


返回 页 面 编辑 区 ， 选 中 按钮 元 件 ， 双 击 交互 事件 中 的 “鼠标 单 击 时 ”事件 ， 打 开 “ 用 例 编辑 ” 
对 话 框 ， 在 对 话 框 中 双击 组 织 动作 下 的 Case2 选项 ， 弹 出 “条 件 设 立 ” 对 话 框 ， 如 图 4-88 所 示 。 
单 击 “确定 ”按钮 ， 返 回 “ 用 例 编辑 ”对 话 框 ， 如 图 4-89 所 示 。 
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图 4-88 
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添加 “显示 ”动作 并 配置 动作 ， 如 图 4-90 所 示 。 继 续 添加 “设置 文本 ”动作 并 配置 动作 ， 


如 图 4-91 所 示 。 
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图 4-91 


单 击 “ 确 定 "按钮 ,返回 页 面 编辑 区 ,如 图 4-92 所 示 。 执 行 “预览 ”命令 ,页面 预 览 效果 如 图 4-93 


图 4-90 
所 示 。 
m = c —- n 
e 


























图 4-93 


在 文本 框 中 输入 “钢笔 工具 怎么 用 ”， 单 击 “ 提 交 ” 按 钮 ， 查 看 效果 ， 如 图 4-94 所 示 。 在 
文本 框 中 输入 “http://www.xdesign8.com/”， 单 击 “ 提 交 ” 按 钮 ， 查 看 效果 ， 如 图 4-95 所 示 。 
命令 ， 将 文件 保存 。 


执行 “文件 > 保存 ” 





图 4-94 
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通过 前 面 的 学 习 ， 用 户 应 该 知道 Axure RP 用 例 是 由 事件 触发 的 一 个 或 多 个 动作 组 成 的 。 每 个 用 
例 至 少 包括 一 个 动作 ， 该 动作 是 一 个 让 浏览 器 做 某 些 事情 的 指令 。 
Axure RP 支持 链接 、 元 件 、 全 局 变量 、 中 继 器 和 其 他 5 类 动作 ， 如 图 4-96 所 示 。 
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4.4.1 链接 类 动作 


链接 类 动作 是 在 跳 转 的 链接 处 添加 用 例 ， 并 设置 两 个 事件 ， 一 个 是 页 面 间 的 跳 转 事件 ， 另 一 个 是 
设置 元 件 / 变量 值 。 下 面 将 详细 向 用 户 介绍 链接 的 各 个 动作 。 
1. 打开 链接 


当前 窗口 : 在 当前 窗口 中 打开 链接 ， 也 就 是 不 弹出 新 的 窗口 。 

新 窗口 / 新 标签 : 在 新 的 窗口 或 者 标签 页 中 打开 链接 。 

弹出 窗口 : 在 弹出 的 窗口 中 打开 链接 。 可 以 控制 弹出 窗口 是 否 有 工具 栏 和 状态 栏 等 设置 ， 同 时 可 
以 设 定 弹出 窗口 的 位 置 和 宽 高 。 

父 级 窗口 : 如 果 使 用 了 内 联 框架 元 件 ， 在 父 级 窗口 中 打开 链接 的 方式 很 常用 。 

关闭 窗口 : 关闭 当前 窗口 。 

2. 在 框架 中 打开 链接 


内 联 框架 : 使 用 了 内 联 框架 ， 可 以 控制 是 在 哪个 框架 中 打开 相应 的 链接 。 

父 级 框架 : 使 用 了 框架 的 谋 套 ， 可 以 控制 在 父 级 框架 而 不 是 当前 框架 中 打开 链接 。 
滚动 到 元 件 > 锚 链接 >: 将 页 面 滚动 设 定 元 件 的 位 置 。 

设置 自 适应 视图 : 原型 设计 可 以 应 用 到 不 同 尺寸 大 小 的 设备 中 。 
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E 为 原型 添加 链接 类 动作 
实例 教学 视频 : 视频 \ 第 4 章 \ 为 局 
17 源 文件 : 源 文件 \ 第 4 章 \ 为 有 





实例 分 析 : 

该 实例 为 “鼠标 单 击 时 ”事件 添 
加 链接 类 动作 。 操 作 简单 ， 用 户 在 实 
际 操作 中 会 发 现 使 用 不 同 的 链接 类 动 
作 ， 可 以 实现 不 同 的 效果 。 











制作 步骤 : 
DET 执行 “文件 > 新 建 ”命令 , 新 建 一 个 项 目 文件 ， 如 图 4-97 Fn. f68— ERU ERIT 


编辑 区 内 ， Neil 导入 “素材 \ 第 4 章 \008. raid 图 片 ， 效 果 如 图 4-98 所 示 。 
































图 4-97 图 4-98 
继续 拖 入 一 个 文本 标签 元 件 , 输入 文本 “点 击 图 片 登录 空间 ”, 如 图 4-99 所 示 。 设 置 文本 样式 ， 
字体 为 黑体 、 粗 体 ， 字 号 为 14， 如 图 4-100 所 示 。 
文字 效果 如 图 4-101 所 示 。 选 中 图 片 元 件 ， 为 该 元 件 重 命名 为 “空间 图 标 ”， 并 双击 “ 鼠 
标 单 击 时 ”事件 ， 打 开 “ 用 例 编辑 ”对 话 框 ， 如 图 4-102 所 示 。 
在 “添加 动作 ”选项 中 选择 “当前 窗口 ”选项 , 如 图 4-103 所 示 。 在 “配置 动作 ”选项 中 选择 “ 链 
接 到 url 或 文件 ”选项 ， 在 超 链接 下 输入 链接 地 址 ， 如 图 4-104 所 示 。 
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4-101 图 4-102 





























4-103 4-104 


单 击 "HE" 按钮 , 回 到 页 面 编辑 区 , 执行 “预览 ”命令 , 预览 效果 如 图 4-105 和 图 4-106 所 示 。 
在 页 面 管理 面板 中 添加 一 个 新 页 面 ， 重 命名 为 “新 窗口 ”， 如 图 4-107 所 示 。 在 该 页 面 中 
拖 入 一 个 默认 按钮 元 件 ， 如 图 4-108 所 示 。 
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图 4-108 


， 设 置 字体 为 微软 雅 黑 ， 字 号 为 13， 字 体 颜色 为 333333, 


输入 文字 “点 击 进入 设计 网 站 ” 
如 图 4-109 所 示 。 选中 该 元 件 , 双击 “鼠标 单 击 时 ”事件 , 打开 “用 例 编辑 ”对 话 框 , 如 图 4-110 所 示 。 


















































图 4-109 





图 4-110 
在 “添加 动作 ”选项 中 选择 “新 窗口 /新 标签 ”选项 ， 如 图 4-111 所 示 。 在 “配置 动作 ” 选 
项 中 选择 “链接 到 url 或 文件 ”选项 ， 在 超 链接 下 输入 链接 地 址 ， 如 图 4-112 所 示 。 
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图 4-111 图 4-112 
单 击 “确定 ” 按钮, 回 到 页 面 编辑 区 , 执行 “预览 ” 命令 , 预览 效果 如 图 4-113 和 图 4-114 所 示 。 




















l- l u—— 

Fi 4-113 图 4-114 
继续 添加 名 称 为 “弹出 窗口 ”的 页 面 。 在 该 页 面 中 拖 入 一 个 提交 按钮 ， 显 示 文本 为 “ 单 击 此 
按钮 ”， 如 图 4-115 所 示 。 为 按钮 添加 “鼠标 单 击 时 ”事件 ， 在 “用 例 编辑 ”对 话 框 中 添加 “弹出 
窗口 ”动作 ， 如 图 4-116 所 示 。 
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在 “配置 动作 ”选项 中 设置 参数 ， 如 图 4-117 所 示 。 单 击 “ 确 定 ”按钮 ， 回 到 页 面 编辑 区 中 ， 
如 图 4-118 所 示 。 












































图 4-117 图 4-118 
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图 4-119 图 4-120 


用 户 会 看 到 单 击 按钮 后 弹出 的 对 话 框 很 CEO (m 
小 ， 对 话 框 的 尺寸 设置 是 在 配置 动作 中 v eme (Gm 
设置 的 ， 如 图 4-121 所 示 。 es 
9300 px 高 |300 px 


图 4-121 
继续 添加 名 称 为“ 父 级 窗口 ”的 页 面 ， 在 主页 面 内 添加 子 页 面 ， 如 图 4-122 所 示 。 双 


击 进入 子 页 面 编辑 区 , 拖 入 一 个 图 片 元 件 , 并 导入 “素材 \ 第 4 章 \009.jpg” 图 片 , 如 图 4-123 
所 示 。 





Qu 


第 4 章 交互 事件 






































mm 
[ index 
D sein 
D 弹出 窗口 
4[) asn 
D 7mm 
图 4-122 图 4-123 


为 图 片 元 件 添 加 “鼠标 单 击 时 ”事件 ， 在 “用 例 编辑 ”对 话 框 中 添加 “ 父 级 窗口 ”动作 ， 如 
图 4-124 所 示 。 单 击 “ 确 定 ” 按 钮 ， 回 到 页 面 编辑 区 ， 效 果 如 图 4-125 所 示 。 




















4-124 图 4-125 
进入 “ 父 级 窗口 ”页 面 ， 添 加 默认 按钮 元 件 ， 修 改 文字 为 “进入 子 页 面 ”， 效 果 如 图 4-126 
所 示 。 为 该 按钮 元 件 添加 “鼠标 单 击 时 ”事件 ， 在 “用 例 编辑 ”对 话 框 中 添加 “ 父 级 窗口 ”动作 ， 如 
图 4-127 所 示 。 
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单 击 “ 确 定 ”按钮 ， 回 到 页 面 编辑 区 ， 执 行 “ 预 览 ”命令 ， 预 览 效果 如 图 4-128 和 图 4-129 
所 示 。 


























图 4-128 4-129 
继续 添加 名 称 为 “关闭 窗口 ”的 页 面 , 在 该 页 面 中 添加 图 片 元 件 , 并 导入 “素材 \ 第 4 章 \010. 
jpg” 图 片 , 如 图 4-130 所 示 。 为 图 片 元 件 添加 “鼠标 单 击 时 ”事件 , 在 “用 例 编辑 ”对 话 框 中 添加 “ 关 
闭 窗 口 ”动作 ， 如 图 4-131 所 示 。 


























图 4-130 图 4-131 


单 击 “ 确 定 ”按钮 ， 回 到 页 面 编辑 区 ， 如 图 4-132 所 示 。 执 行 “预览 ”命令 ， 查 看 效果 ， 
鼠标 单 击 对 话 框 ， 弹 出 提示 框 ， 如 图 4-133 所 示 。 


























图 4-132 图 4-133 


添加 名 称 为 “内 联 框架 ”的 页 面 ， 在 该 页 面 中 拖 入 内 联 框架 元 件 ， 如 图 4-134 所 示 。 继 续 
拖 入 表格 元 件 ， 如 图 4-135 所 示 。 
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4-134 图 4-135 


默认 的 表格 元 件 是 3 行 3 列 的 ， 用 户 可 以 根据 需要 对 表格 进行 编辑 ， 选 中 表格 元 件 ， 单 击 鼠 
标 右键 ， 在 弹出 的 菜单 中 可 以 选择 “删除 行 ” 或 “删除 列 ” 命 令 ， 如 图 4-136 所 示 。 将 表格 调整 为 
1 行 2 列 ， 如 图 4-137 所 示 。 
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图 4-136 图 4-137 


选中 第 1 个 单元 格 , 输入 文字 “暴雪 游戏 视频 ”, 并 为 该 单元 格 添加 “鼠标 单 击 时 ”事件 , 在 “用 
例 编辑 ”对 话 框 中 添加 “内 联 框架 ”动作 ， 如 图 4-138 所 示 。 使 用 相同 的 方法 为 第 2 个 单元 格 添加 


事件 动作 ， 如 图 4-139 所 示 。 
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单 击 “确定 ”按钮 ， 回 到 页 面 编辑 区 ， 如 图 4-140 所 示 。 执 行 “ 文 件 > 保存 ”命令 ， 将 项 
目 文件 保存 。 执 行 “预览 ”命令 ， 查 看 效果 ， 鼠 标 单 击 对 话 框 ， 弹 出 提示 框 如 图 4-141 所 示 。 
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图 4-140 图 4-141 


4.4.2 元 件 事件 


元 件 事件 是 指 在 元 件 上 添加 动作 ， 实 现 各 种 效果 的 操作 。 为 元 件 添加 动作 很 简单 ， 只 要 选择 正确 
的 元 件 ， 添 加 相应 的 动作 ， 即 可 实现 交互 效果 。 下 面 逐一 介绍 元 件 事件 的 功能 。 

1. 显示 /隐藏 

显示 : 显示 面板 。 

隐藏 : 隐藏 面板 。 

切换 可 视 性 : 隐藏 或 显示 面板 。 当 面板 显示 时 ， 变 为 隐藏 ， 当 面板 隐藏 时 ， 变 为 显示 。 

设置 面板 状态 : 可 以 设置 动态 面板 的 状态 。 

设置 文本 : 设置 一 个 元 件 的 显示 文本 。 

设置 图 片 : 动态 地 设置 一 个 图 片 元 件 上 的 显示 图 片 ， 但 是 并 不 能 动态 地 将 一 个 图 片 元 件 的 UOL 
指定 给 一 个 图 片 元 件 ， 也 是 要 通过 预先 带 入 的 方式 设 定 图 片 。 

2. 设置 选中 

选中 : 设置 元 件 的 选中 状态 。 

取消 选中 : 取消 元 件 的 选中 状态 。 

切换 选中 状态 : 选中 或 者 取消 选中 元 件 的 状态 。 

设置 列表 选中 项 : 设置 下 拉 列 表 的 选中 状态 。 

3. 启用 /禁用 


启用 : 启用 某 个 元 件 。 

禁用 : 禁用 某 个 元 件 ， 例 如 禁用 某 个 输入 框 。 

移动 : 移动 元 件 到 一 个 具体 的 位 置 上 ， 在 横向 或 纵向 上 将 一 个 元 件 移动 多 少 像素 。 
旋转 : 旋转 一 个 元 件 的 具体 角度 是 多 少 像素 。 

设置 尺寸 : 设置 一 个 元 件 的 具体 尺寸 。 











Q6 


第 4 章 交互 事件 


4. 置 于 顶层 / 底层 

置 于 顶层 : 在 选中 多 个 元 件 的 情况 下 ， 可 以 将 其 中 某 一 元 件 的 位 置 置 于 顶层 。 
置 于 底层 : 在 选中 多 个 元 件 的 情况 下 ， 可 以 将 其 中 某 一 元 件 的 位 置 置 于 底层 。 
获取 焦点 : 让 某 元 件 获得 鼠标 焦点 。 

5. 展开 HEBES ER 

展开 树 节点 : 针对 树 状元 件 使 用 。 展 开元 件 的 树 节点 。 

折 县 树 节点 : 针对 树 状元 件 使 用 。 折 者 元 件 的 树 节点 。 


实例 使 用 单 选 按钮 进行 选择 


教学 视频 : 视频 \ 第 4 E \ 使 用 单 选 按钮 进行 选择 .mp4 
18 源 文件 ， 源 文件 \ 第 4 章 \ 使 用 单 选 按钮 进行 选择 .rp 





实例 分 析 : 

该 实例 为 单 选 按钮 添加 获取 焦点 
事件 ， 并 依次 添加 了 设置 选中 、 设 置 
文本 和 显示 动作 等 按钮 事件 ， 实 现在 
页 面 中 选择 感 兴趣 内 容 的 单 选 效 果 。 


以 下 哪 门 课程 是 您 最 想 要 了 解 的 课程 ? 
Photoshop © Axure RP © Dreamweaver 


您 最 想 了 解 的 课程 是 ，Dreamweaver 


制作 步骤 : 


执行 “文件 > 新 建 ” 命 令 ， 新建 一 个 项 目 文件 ， 如 图 4-142 Hrm. f85— T 8n: 3 元 件 到 
页 面 编辑 区 内 ， 设 置 元 件 的 位 置 为 X300、Y 230， 尺 寸 为 W460、H260， 如 图 4-143 所 示 。 
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将 矩形 元 件 重 命名 为 “背景 ”并 锁定 ， 继 续 拖 愚 文本 标签 元 件 到 页 面 编辑 区 内 ， 设 置 字体 为 
新 宋体 ， 字 号 为 20 号 ， 颜 色 为 #0000FF， 输 入 “以 下 哪 门 课程 是 您 最 想 要 了 解 的 课程 ? ”文本 ， 
将 元 件 重 命名 为 “标题 ”， 如 图 4-144 所 示 。 拖 入 单 选 按钮 元 件 ， 设 置 字体 为 新 宋体 ， 字 号 为 16 S, 
颜色 为 黑色 ， 显 示 文 字 为 Photoshop， 重 命名 为 “选项 1”， 效 果 如 图 4-145 所 示 。 





以 下 哪 门 课程 是 您 最 想 要 了 解 的 课程 ? 以 下 哪 门 课程 是 您 最 想 要 了 解 的 课程 ? 


OPhotoshop 


o 
MÀ RÀ 





图 4-144 图 4-145 


使 用 相同 的 方法 制作 其 他 单 选 按钮 元 件 ， 如 图 4-146 所 示 。 再 次 拖 入 一 个 文本 标签 元 件 ， 
设置 字体 为 宋体 ， 颜 色 为 黑色 ， 字 号 为 16 号 ， 输 入 “您 最 想 了 解 的 课程 是 : ”文本 ， 重 命名 为 “ 选 
择 答 案 ”， 如 图 4-147 所 示 。 


以 下 哪 门 课程 是 您 最 想 要 了 解 的 课程 ? 以 下 哪 门 课程 是 您 最 想 要 了 解 的 课程 ? 


OPhotoshop OAxure EP Uhreammeaverd OPhotoshop OAxure RP ODreaweaver 





您 最 想 了 解 的 课程 是 ， 


图 4-146 图 4-147 


再 次 拖 入 一 个 文本 标签 元 件 , 显示 内 容 为 无 , 将 该 文本 标签 设置 为 隐藏 , 重 命名 为 “显示 答案 ”， 
如 图 4-148 所 示 。 按 住 Ctrl 键 将 所 有 的 单 选 元 件 选中 , 单 击 鼠 标 右键 , 在 弹出 的 菜单 中 选择 “指定 [ 单 
选 按钮 ] 组 ”命令 ， 如 图 4-149 所 示 。 
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图 4-148 4-149 


弹出 “输入 [选项 ] 组 名 称 ” 对 话 框 ， 如 图 4-150 所 示 。 在 该 对 话 框 中 设置 组 名 称 为 “选项 
组 ”， 如 图 4-151 所 示 。 
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图 4-150 4-151 


单 击 “ 确 定 "按钮 , 返回 页 面 编辑 区 , 选中 选项 1 元 件 , 双击 “获取 焦点 时 ”事件 , 如 图 4-152 
所 示 。 打 开 “ 用 例 编辑 ”对 话 框 ， 如 图 4-153 所 示 。 
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4-152 图 4-153 
在 “用 例 编辑 ”对 话 框 中 添加 “选中 ”动作 并 配置 动作 , 如 图 4-154 所 示 。 继 续 添加 “设置 文本 ” 
动作 ， 如 图 4-155 所 示 。 
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图 4-154 4-155 


在 设置 文本 下 的 第 一 个 下 拉 菜 单 中 选择 “ 富 文本 "命令 , 单 击 “ 编 辑 文本 ”按钮 , 弹出 “输入 文本 ” 
对 话 框 ， 在 该 对 话 框 中 输入 文字 Photoshop 并 设置 字体 样式 ， 如 图 4-156 和 图 4-157 所 示 。 
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在 下 方 尝 短 区 输入 文本 并 设置 文本 样式 , 变量 名 称 或 表达 式 要 写 在 TT 中 。 供 如 : SEASEERMyVarEENEDS 
D HE 插入 表达 式 [IVarA+ VarBJj 返 回 值 为 VarA+ VarE 的 和 ; 插入 IPageName] 返回 值 为 当 


FRE - 
| Regular. Y» |16 -| 
EmN AE E 
| z7 
| EEE 
ETETEN. 





设置 文本 为 : 
Men 
4-156 4-157 


单 击 “ 确 定 ” 按 钮 ， 回 到 “用 例 编辑 ”对 话 框 ， 如 图 4-158 所 示 。 继 续 添加 “显示 ”动作 
并 配置 动作 ， 如 图 4-159 所 示 。 
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4-158 图 4-159 
使 用 相同 的 方法 为 选项 2 和 选项 3 元 件 添加 事件 ， 如 图 4-160 和 图 4-161 所 示 。 
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执行 “预览 ”命令 ， 查 看 效果 如 图 4-162 和 图 4-163 所 示 。 执 行 “ 文 件 > 保存 ”命令 ， 将 
文件 保存 。 
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4-162 图 4-163 


4.4.8 ”全 局 变量 


全 局 变量 的 主要 用 途 之 一 是 用 于 页 面 之 间 的 跳 转 ， 通 过 变量 控制 页 面 显 示 的 状态 。 例 如 登录 界面 
中 ， 用 户 登录 后 ， 会 显示 用 户 的 信息 ， 从 当前 页 面 跳 转 后 ， 用 户 不 需要 再 登录 。 

设置 变量 ; 设置 变量 或 者 元 件 的 值 。 通 过 这 个 动作 ， 可 以 给 变量 赋值 ， 例 如 通过 设置 变量 更 改 显 
示 文 本 内 容 。 









实例 设置 抽奖 转盘 
1 9 教学 视频 : 视频 \ 第 4 章 \ 设 置 抽奖 转盘 .mp4 A: 源 文件 \ 第 4 章 \ 设 置 抽 奖 转盘 .rp 


实例 分 析 : 

该 实例 主要 是 运用 全 局 变量 动作 
实现 抽奖 效果 。 在 配置 全 局 变量 动作 
时 ， 通 常 需要 添加 新 的 变量 。 实 例 中 
还 添加 了 旋转 事件 ， 实 现 元 件 转动 的 
交互 效果 。 


制作 步骤 : 


执行 “文件 > 新 建 ”命令 ， 新 建 一 个 项 目 文件 ， 如 图 4-164 所 示 。 拖 息 一 个 图 片 元 件 到 页 
面 编辑 区 内 ， 双 击 元 件 ， 导 入 “素材 \ 第 4 章 \011.jpg” 图 片 ， 将 图 片 元 件 重 命名 为 “转盘 ”， 页 面 
效果 如 图 4-165 所 示 。 
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4-164 mm 图 4-165 
再 次 拖 入 一 个 矩形 1 元 件 ,将 矩形 1 元 件 转换 为 三 角形 , 如 图 4-166 所 示 , 效果 如 图 4-167 
所 示 。 


——————————— 1 
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图 4-166 图 4-167 
调整 三 角形 的 位 置 和 大 小 ， 设 置 填充 颜色 为 #DA251C， 边 框 颜色 为 无 ， 将 三 角形 元 件 重 命 
名 为 “指针 ”, 如 图 4-168 所 示 。 选中 转盘 元 件 ,双击 “鼠标 单 击 时 ”事件 , 打开 “用 例 编辑 ”对 话 框 ， 
如 图 4-169 所 示 。 
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INA 添加 “设置 全 局 变量 ”动作 ， 单 击 “ 添 加 全 局 变量 


”选项 ， 弹 出 “全 局 变量 ”对 话 框 ， 在 该 


对 话 框 中 添加 angle zm, 如 图 170 所 示 。 在 配置 动作 下 设置 参数 ， 如 图 4-171 所 示 。 














图 4-170 
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图 4-171 


继续 添加 “旋转 ”动作 ， 在 配置 动作 下 设置 参数 ， 如 图 4-172 所 示 。 继 续 添加 “等 待 ” 动 作 ， 


在 配置 动作 下 设置 参数 ， 如 图 4-173 所 示 。 
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单 击 “ 确 定 ” 按 钮 ， 返 回 页 面 编辑 页 面 ， 执 行 


和 图 4-175 所 示 。 











图 4-173 
“预览 ”命令 ， 预 览 文件 ， 最 终 效 果 如 图 4-174 
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4.4.4 ”中 继 器 


中 继 器 元 件 是 一 种 高 级 元 件 ， 是 一 个 存放 数据 集 的 容器 ， 通 常 使 用 中 继 器 来 显示 商品 列表 、 联 系 
人 信息 列表 和 数据 表 等 。 

中 继 器 元 件 是 由 中 继 器 数据 集 ( Repeater Dataset ) 中 的 数据 项 填充 的 ， 数 据 项 可 以 是 文本 、 
图 片 或 页 面 链接 。 将 中 继 器 元 件 拖 入 Axure RP 页 面 编辑 区 内 ， 选 中 后 双击 中 继 器 元 件 ， 就 会 进入 中 
继 器 面板 ， 在 这 里 可 以 对 中 继 器 进行 编辑 和 设置 。 

中 继 器 动作 如 下 。 

添加 排序 : 为 中 继 器 增加 排序 命令 。 

移 除 排序 : 为 中 继 器 删除 排序 命令 。 

添加 筛选 : 为 中 继 器 添加 筛选 命令 。 

移 除 筛选 : 为 中 继 器 删除 筛选 命令 。 

设置 项 目 数量 : 设置 中 继 器 的 项 目 数量 。 

数据 集 : 控制 数据 集 。 

添加 行 : 为 中 继 器 的 数据 集 添加 行 。 

标记 行 : 为 中 继 器 的 数据 集 标 记 行 。 

取消 标记 : 为 中 继 器 的 数据 集 取消 标记 行 。 

更 新 行 : 为 中 继 器 的 数据 集 更 新 行 。 

删除 行 : 为 中 继 器 的 数据 集 删除 行 。 

执行 “文件 > 新 建 ” 命 令 ， 新建 一 个 项 目 文件 ， 如 图 4-176 所 示 。 将 中 继 器 拖 昕 到 页 面 中 ， 并 
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图 4-177 

双击 中 继 器 进入 中 继 器 编辑 页 面 ， 在 页 面 编辑 区 内 有 一 个 矩形 元 件 ， 如 图 4-178 所 示 。 在 检视 
面板 中 会 出 现 “ 数 据 集 ” 标 签 ， 如 图 4-179 所 示 。 在 检视 面板 中 可 以 编辑 中 继 器 的 数据 集 、 用 例 交 
互 和 格式 设置 。 
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图 4-178 图 4-179 


中 继 器 的 数据 集 就 像 一 个 Excel 表格 ， 双 击 Column 即 可 对 中 继 器 的 列 进行 重 命名 ， 
在 Axure RP 中 是 不 能 以 中 文 命名 项 目 名 称 的 。 


将 Column 重 命名 为 Picture， 如 图 4-180 所 示 。 单 击 “ 添 加 行 ”按钮 ， 将 添加 的 行 重 命名 ， 
即 可 添加 行 ， 如 图 4-181 所 示 。 
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图 4-180 


图 4-181 


使 用 相同 的 方法 单 击 “ 添 加 列 ”， 将 新 添加 的 列 重 命名 ， 即 可 添加 列 ， 如 图 4-182 所 示 。 选 中 
第 1 行 第 1 列 的 位 置 ， 如 图 4-183 所 示 。 
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4-183 
单 击 鼠 标 右键 ， 弹 出 如 图 4-184 所 示 的 下 拉 菜 单 。 
导入 图 片 : 在 中 继 器 中 插入 图 片 。 


引用 页 面 : 可 以 添加 参考 页 , 当 用 户 单 击 时 就 跳 转 到 相关 的 页 面 , 单 击 鼠 标 右键 , 弹出 “引用 页 面 ” 
对 话 框 ， 可 以 选择 相应 的 页 面 ， 如 图 4-185 所 示 。 
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插入 行 : 可 以 插入 行 。 

删除 行 : 可 以 删除 选中 行 。 

上 移 选 中 行 : 将 选中 的 行 向 上 移动 。 

下 移 选 中 行 : 将 选中 的 行 向 下 移动 。 

插入 列 : 可 以 插入 列 。 

删除 列 : 可 以 删除 选中 列 。 

左 移 选中 列 : 将 选中 的 行 向 左 移动 。 

右 移 选 中 列 : 将 选中 的 行 向 右 移动 。 

单 击 “样式 ”选项 ， 可 以 修改 中 继 器 的 “布局 ”和 “间距 ”参数 ， 如 图 4-186 所 示 。 


4 布局 
OSE ©xF 
4 间距 
Mi 排 布 < 网 格 > 
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4-186 


实例 — 网 页 商城 页 面 





20 教学 视频 : 视频 \ 第 4 章 \ 网 页 商城 页 面 .mp4 RAE: 源 文件 \ 第 4 章 \ 网 页 商城 页 面 .rp 


实例 分 析 : 

该 实例 使 用 中 继 器 制作 简单 的 网 
页 商城 效果 ， 使 用 中 继 器 可 以 方便 快 
捷 地 制作 出 所 有 商品 的 内 容 和 信息 ， 
添加 相应 的 事件 ， 实 现 快速 查询 商品 
价格 及 销量 。 
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制作 步骤 : 


执行 “文件 > 新 建 ” 命 令 ， 新 建 一 个 项 目 文件 ， 如 图 4-187 所 示 。 将 中 继 器 拖 踊 到 页 面 中， 
并 重 命名 为 “框架 ”， 如 图 4-188 所 示 。 
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图 4-187 E 图 4-188 
双击 中 继 器 进入 中 继 器 编辑 页 面 ， 在 页 面 编辑 区 内 有 一 个 矩形 元 件 ， 如 图 4-189 所 示 。 在 


检视 面板 中 出 现 “数据 集 ” 标 签 ， 如 图 4-190 所 示 。 
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在 “数据 集 ”标签 中 添加 行 和 列 , 如 图 4-191 所 示 。 选 中 第 1 行 第 1 列 的 位 置 , 单 击 鼠 标 右键 ， 
在 弹出 的 菜单 中 选择 “导入 图 片 ”命令 , 导入 “素材 \ 第 4 章 \012.jpg” 图 片 ， 如 图 4-192 所 示 。 
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图 4-191 图 4-192 


157@ 


移动 互联 网 之 路 一 一 AXure RP 8.0 网 站 与 APP 原型 设计 从 入 门 到 精通 





导入 的 图 片 大 小 要 一 样 ， 要 知道 图 片 具体 的 长 和 高 的 像素 。 本 实例 中 使 用 的 图 片 为 
240x240。 


使 用 相同 的 方法 在 其 他 位 置 导 入 图 片 , 如 图 4-193 所 示 。 在 “数据 集 ” 标 签 内 设置 其 他 参数 ， 
如 图 4-194 所 示 。 
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图 4-193 图 4-194 


在 中 继 器 编辑 页 面 中 拖 入 一 个 图 片 元 件 ， 设 置 元 件 的 坐标 为 X0、Y0， 尺 寸 为 W240、 
Y240， 将 该 元 件 重 命名 为 “商品 图 片 ”， 如 图 4-195 所 示 。 继 续 拖 入 和 矩形 1 元件， 设置 尺寸 为 
W140、Y240， 重 命名 为 “商品 名 称 ”， 如 图 4-196 所 示 。 
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图 4-195 图 4-196 
使 用 相同 的 方法 继续 拖 入 同样 大 小 的 矩形 元 件 ， 如 图 4-197 所 示 。 返 回 到 index 页 面 ， 如 
4-198 所 示 。 


JA (ER) (index) ”bex = 
o jtoo 








B 
g 
& 
g 
8 




















图 4-197 图 4-198 
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选中 中 继 器 元 件 ， 在 “检视 : 中 继 器 ”面板 中 可 以 看 到 中 继 器 默认 已 经 添加 了 “每 项 加 载 时 ” 
事件 并 且 有 Case1, WE 4-199 所 示 。 双 击 打开 “用 例 编辑 ”对 话 框 ， 如 图 4-200 所 示 。 
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4-199 图 4-200 


单 击 组 织 动作 中 的 “设置 Text” 动作 , WE 4-201 所 示 。 在 “配置 动作 ”中 选择 “商品 名 称 ”， 
如 图 4-202 所 示 。 
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REX "IB" , AHER, E AEE ERAR GALERA” AN, 
在 下 拉 菜单 中 选择 Item.headline 选项 ， 如 图 4-203 所 示 。 单 击 “ 确 定 ”按钮 ， 回 到 “用 例 编辑 ” 
对 话 框 ， 如 图 4-204 所 示 。 
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图 4-203 





移动 互联 网 之 路 一 一 AXure RP 8.0 网 站 与 APP 原型 设计 从 入 门 到 精通 





使 用 相同 的 方法 为 “商品 价格 "和 “商品 销量 ”设置 值 , 如 图 4-205 所 示 。 继 续 添加 “设置 图 片 ” 
动作 并 配置 动作 ， 如 图 4-206 所 示 。 
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图 4-206 


在 编辑 文本 时 ， 一 定 要 选 对 中 继 器 中 数据 集 的 标题 ， 如 果 选 择 不 正确 ， 中 继 器 不 会 
显示 数据 集中 的 参数 。 





调整 动作 的 顺序 ， 如 图 4-207 所 示 。 单 击 “ 确 定 ” 按 钮 ， 回 到 页 面 编辑 区 ， 效 果 如 图 4-208 
所 示 。 
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4-207 图 4-208 


在 页 面 编辑 区 内 添加 3 个 文本 标签 元 件 ， 设 置 字体 为 黑体 ， 字 号 为 20 号 ， 字 体 颜色 为 
#FF0000， 显 示 文本 为 商品 名 称 、 商 品 价格 及 商品 销量 ， 如 图 4-209 所 示 。 继 续 添加 两 个 主要 按钮 
元 件 ， 设 置 按 钮 的 尺寸 为 W140、Y40， 显 示 文 字 为 价格 从 低 到 高 和 销量 从 低 到 高 ， 并 且 为 按钮 重 命 
名 ， 如 图 4-210 所 示 。 
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4-209 4-210 
选中 “价格 从 低 到 高 " 按钮 , 双击 “鼠标 单 击 时 "按钮 , 在 “用 例 编辑 ” 对 话 框 中 添加 “添加 排序 ” 
动作 并 配置 动作 ,如 图 4-211 所 示 。 使 用 相同 的 方法 为 “销量 从 低 到 高 ”按钮 添加 事件 ,如 图 4-212 
所 示 。 





























图 4-211 图 4-212 





页 面 编辑 区 效果 如 图 4-213 所 示 。 执 行 “预览 ”命令 ， 页 面 效果 如 图 4-214 所 示 。 
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图 4-213 图 4-214 


单 击 “ 价 格 从 低 到 高 "按钮 ,效果 如 图 4-215 所 示 。 单 击 “销量 从 低 到 高 "按钮 ,效果 如 图 4-216 
所 示 。 
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图 4-215 图 4-216 


4.4.5 ”其 他 


等 待 : 让 Axure RP 在 等 待 一 定 的 毫秒 数 后 ， 再 执行 下 面 的 动作 ， 类 似 编程 中 的 sleep 功能 。 

其 他 : 包括 其 他 任何 Axure RP 不 支持 的 ， 但 是 用 户 希 望 未 来 网 站 能 够 支持 的 功能 。 这 个 其 实 不 
是 一 个 动作 ， 而 是 一 个 描述 。 例 如 用 户 希 望 告诉 开发 者 ， 在 单 击 某 个 按钮 时 ， 播 放 一 个 声音 ， 即 可 选 
择 “ 其 他 ”动作 ， 在 配置 动作 中 说 明 要 播放 的 声音 。 

触发 事件 : 可 以 在 更 多 情况 下 为 一 个 元 件 同 时 添加 多 个 交互 事件 。 





实例 — 显示 中 奖 结果 
21 教学 视频 : 视频 \ 第 3 章 \ 显 示 中 奖 结果 .mp4 源 文 件 : 源 文 件 \ 第 3 章 \ 显示 中 奖 结果 .rp 





实例 分 析 : 

该 实例 在 抽奖 转盘 的 基础 上 
继续 添加 触发 事件 动作 和 设置 文 
本 动作 等 ， 实 现 当 用 户 单 击 后 显 
示 中 奖 结果 的 交互 效果 。 





制作 步骤 : 


接着 之 前 的 “抽奖 转盘 ”实例 继续 制作 ， 调 整 转盘 的 位 置 为 X0、Y0， 尺 寸 为 W368、 
H368， 如 图 4-217 所 示 。 将 指针 和 转盘 组 合 ， 如 图 4-218 所 示 。 
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图 4-217 
在 转盘 下 添加 一 个 文本 标签 元 件 , 设置 位 置 为 X40、Y378, RYA W270, H16, 重 命名 为 “ 抽 
奖 结果 ”， 如 图 4-219 所 示 。 继 续 拖 入 文本 标签 元 件 ， 设 置 位 置 为 X105、Y438， 尺 寸 为 W128、 


H22， 如 图 4-220 所 示 。 为 了 便于 观察 ， 可 暂时 将 第 一 个 文本 标签 隐藏 。 
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图 4-219 
设置 字体 为 黑体 , 字体 大 小 为 16 号 , 输入 “点 击 转盘 开始 抽奖 "文本, 将 文本 标签 重 命名 为 “ 标 
题 ”， 如 图 4-221 所 示 。 选 中 “转盘 ”元 件 ， 双 击 Case1 继续 添加 “设置 文字 ”动作 并 配置 动作 ， 





























如 图 4-222 所 示 。 
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如 图 4-224 








图 4-221 
添加 “触发 事件 ”动作 ， 配 置 动 作 如 图 4-223 所 示 。 调 整 事件 触发 顺序 ， 


所 示 。 
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图 4-223 图 4-224 
单 击 “确定 ”按钮 ， 回 到 页 面 编辑 区 ， 选 中 “中 奖 结果 ”文本 标签 元 件 ， 如 图 4-225 所 示 。 


ASAFA 
图 4-225 图 4-226 
双击 Case1 选项 ， 打 开 “ 条 件 设立 ”对 话 框 ， 在 该 对 话 框 中 设置 条 件 ， 如 图 4-227 所 示 。 
单 击 “确定 ”按钮 ， 回 到 “用 例 编辑 ”对 话 框 ， 如 图 4-228 所 示 。 
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图 4-228 
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继续 添加 “设置 文本 ”动作 并 配置 动作 , 如 图 4-229 所 示 。 单 击 “确定” 按钮 , 回 到 页 面 编 区 中 ， 
再 次 双击 “鼠标 单 击 时 ”事件 ， 添 加 Case2 用 例 ， "m 4-230 dicis 









































图 4-229 图 4-230 


使 用 相同 的 方法 为 Case2 添加 条 件 及 动作 ， 如 图 4-231 所 示 。 继 续 添加 Case3 用 例 ， 双 
击 组 织 动 作 Case3， 打 开 “ 条 件 设 立 ” 对 话 框 ， 如 图 4-232 所 示 。 
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设置 逻辑 的 值 为 “ 值 ”， 单 击 加 按钮 ， 在 编辑 文本 中 设置 值 如 图 4-233 所 示 。 单 击 “ 确 定 ” 
按钮 ， 回 到 “条 件 设立 ” 对 话 杠 ， 继续 设置 参数 ， 如 图 4-234 所 示 。 
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图 4-233 4-234 





HUE 单 击 “ 确 定 ”按钮 ， 回 到 “用 例 编辑 ”对 话 框 中 继续 添加 动作 ， 如 图 4-235 所 示 。 单 击 “ 确 
d 按钮 ， 回 到 页 面 编辑 区 中 ， 如 图 4-236 = 


pi H 


E 


HIP, 





m e eecitieoectzme s D y, 
€ a eee A o [ied ir rare End 
-— P zere sow E 
T€ pene memi a 

pr sagi Mann 
samo mcam Come 
V mozam sa s- prd 
ipeum - pe ama: 
"hex mca ^ 
voa 
genome. aces aen 
EI 
arm 2 eme 
z. 
ze 
=x 
e 
— M 
cu 

p 一 

mae 
n" a em 
pe me 

axem - m 
atreve LI - = mama a 
LE sas ee am la [ersan s 
x p 
C») mm.| | Cm) wa] 


图 4-235 






















































































单 击 “ 确 定 " 按钮 , 回 到 页 面 编辑 区 , 如 图 4-239 所 示 。 执 行 “预览 " db 


所 示 。 





4-237 
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图 4-238 
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4-240 





令 查看 效果 , 如 图 4-240 


第 4 章 交互 事件 


一 个 Axure RP 交互 是 包含 某 个 事件 的 容器 ， 这 个 事件 至 少 包含 一 个 用 例 ， 并 且 每 个 用 例 至 少 包 
含 一 个 动作 。 

根据 想 要 传达 给 利益 相关 者 、 开 发 人 员 和 用 户 的 交互 体验 ， 评 估 交 互 事件 的 价值 ， 从 而 确定 所 需 
要 创建 的 交互 动作 的 优先 级 。 

首先 要 关注 主要 交互 流程 ， 然 后 是 次 要 交互 流程 ， 最 后 再 考虑 其 他 情况 的 流程 。 最 后 一 点 ， 原 型 
越 复 杂 ， 维 护 和 修改 成 本 越 高 。 作 为 一 个 合格 的 设计 师 ， 也 要 充分 考虑 这 一 点 。 


Axure RP 自 带 的 元 件 都 可 以 添加 交互 动作 。 但 无 法 用 一 个 元 件 来 执行 所 有 可 能 的 动作 ， 因 为 大 
部 分 元 件 都 有 其 特定 的 用 途 和 限制 。 

例如 ， 单 选 按钮 可 以 被 选中 或 不 选中 、 启 动 或 禁用 、 获 得 焦点 或 失去 焦点 。 所 以 Axure RP 的 事 
件 和 元 件 是 有 关联 的 ， 即 不 同 的 元 件 有 不 同 的 事件 。 


每 个 元 件 支持 不 同 的 事件 ， 将 元 件 拖 昕 到 页 面 编辑 区 内 ， 选 中 元 件 ， 在 “检视 : 元 件 ” 
面板 的 属性 标签 下 可 以 看 到 该 元 件 支持 的 事件 。 


用 户 需 要 注意 的 是 ， 一 些 元 件 不 添加 事件 也 能 够 响应 用 户 操作 。 例 如 ， 表 单 中 的 文本 框 元 件 和 下 
拉 列 表 元 件 等 ， 如 图 4-241 所 示 。 虽 然 没 有 添加 事件 ， 但 还 是 可 以 响应 用 户 的 行为 。 


4 默认 > 表单 元 件 


ez; a EB EB M (9 e 


文本 框 多 行文 本 框 。 下 拉 列 表 框 D zd Eid 单 选 按钮 提交 按钮 




















4-241 
选择 下 拉 列 表 元 件 ， 即 使 不 添加 事件 ， 也 可 以 对 元 件 的 选项 进行 调整 。 因 为 下 拉 列 表 元 件 本 身 就 
自 带 交互 事件 。 对 于 其 他 元 件 , 如 果 没有 添加 交互 事件 及 行为 , 当 生成 HTML 原型 在 浏览 器 中 浏览 时 ， 
与 编辑 区 中 的 静态 图 片 没有 区 别 。 


4.5.3 为 元 件 命名 


为 所 有 元 件 进行 命名 是 非常 重要 的 。 不 要 认为 有 了 “当前 元 件 ” 功 能 ， 为 元 件 命名 就 不 再 重要 了 ， 
“当前 元 件 ”位 于 配置 动作 的 选项 框 中 ， 如 图 4-242 所 示 。 

“当前 元 件 ”功能 是 一 种 开发 的 编码 技巧 ， 开 发 者 注释 代码 是 为 了 让 其 他 人 员 看 懂 代码 ，Axure 
RP 中 没有 “代码 ”功能 ， 所 以 元 件 名 称 是 设计 师 和 同事 们 能 够 看 明白 交互 逻辑 的 重要 原因 。 

如 果 直接 为 选中 的 元 件 创 建交 互 ， 可 以 不 标记 元 件 。 通 常情 况 下 ， 需 要 利用 其 他 事件 或 元 件 来 间 
接 作用 于 某 个 元 件 ， 在 引用 元 件 时 命名 就 变 得 非常 有 价值 。 
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图 4-242 


在 实际 工作 中 ， 通 常 需要 生成 界面 审核 规范 文档 。 为 了 让 文档 更 加 有 参考 价值 ， 元 件 名称 也 是 有 
必要 的 。 


实例 “实现 放大 镜 效 果 
2 2 教学 视频 : 视频 \ 第 4 章 \ 实 现 放大 镜 效 果 .mp4 源 文件 : 源 文件 \ 第 4 章 \ 实 现 放 大 镜 效 果 .rp 





实例 分 析 : 

该 实例 通过 使 用 一 个 动态 面板 内 多 个 
子 动态 面板 ， 实 现 放大 镜 效果 。 同 时 还 使 
用 中 继 器 元 件 实现 可 以 选择 不 同 的 图 片 进 
行 放 大 镜 效果 。 本 实例 的 制作 需要 较 长 时 
间 ， 用 户 在 制作 时 要 有 充足 的 准备 。 





制作 步骤 : 


执行 “文件 > 新建” 命令 ,新 建 一 个 项 目 文档 ， 如 图 4-243 所 示 。 在 index REFER — 
个 图 形 元 件 ， 设 置 元 件 的 坐标 为 X200、Y100， 尺 寸 为 W400、H400， 重 命名 为 “ 主 图 ”， 双 击 元 
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件 ， 导 入 “素材 \ 第 4 章 \20.jpg” 图 片 ， 如 图 4-244 所 示 。 
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图 4-243 图 4-244 
继续 拖 入 动态 面板 元 件 ， 设 置 动 态 面板 的 坐标 为 X550、Y110， 尺 寸 为 W130、H130, Æ 
命名 为 “放大 镜 ”， 如 图 4-245 所 示 。 双 击 动态 面板 进入 State1 状态 页 面 ， 如 图 4-246 所 示 。 
iibi iod lato LI Maec Aeee € Ó—— 









































4-245 图 4-246 


在 页 面 中 拖 入 一 个 矩形 1 元 件 ， 设 置 和 矩形 元 件 的 尺寸 为 W100、H100， 将 矩形 元 件 转换 为 
圆 形 ， 如 图 4-247 所 示 。 设 置 圆 形 元 件 的 线 框 和 线 框 颜色 ， 填 充 颜色 为 无 ， 如 图 4-248 所 示 。 



























































4-248 
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调整 贺 形 元 件 的 坐标 为 X0、Y0， 重 命名 为 “镜头 ”， 如 图 4-249 所 示 。 拖 入 一 个 图 片 元 


件 , 设置 坐标 为 X80、Y80, 尺寸 为 W50、H50, 导 


所 示 。 


“素材 \ 第 4 章 \021.jpg” 图 片 , 如 图 4-250 


在 该 页 面 中 继续 拖 入 一 个 动态 面板 ， 设 置 该 动态 面板 的 名 称 为 01， 其 坐标 为 X30、Y4， 尺 
寸 为 W40、H5, 如 图 4-251 所 示 。 双击 01 动态 面板 , 将 State1 重 命名 为 “图 片 1”, 如 图 4-252 
所 示 。 











4-249 
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图 4-251 








MA ”放大镜 1 State1 (index) index > ] 
0 100 i200 
































图 4-250 
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图 4-252 


这 里 制作 的 动态 面板 包含 动态 面板 实现 的 效果 ， 用 户 需 要 对 动态 面板 进行 重 命名 ， 
防止 相同 的 元 件 过 多 不 好 分 辨 。 


进入 “图 片 1” 页 面 ， 在 该 页 面 内 拖 入 一 个 图 片 元 件 并 导入 图 片 ， 设 置 其 坐标 为 X120、 


120， 尺 寸 为 W700 








、H700， 如 图 4-253 所 示 。 页 面 面 板 如 图 4-254 





所 示 。 


Outine: 页 面 


mow 
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在 放大 镜 动态 面板 中 继续 拖 彼 动态 面板 , 重 命名 为 02, 将 State1 重 命名 为 图 片 2, 如 图 4-255 
所 示 。 设 置 该 动态 面板 的 坐标 为 X22、Y9， 尺 寸 为 W56、H5， 如 图 4-256 所 示 。 


























Jm 011E index) | BERE State d (index) x | index = 
SERERE 02 y: Uu in 35 
mees n 
imttes 
m2 
[ERN NN E 
4-255 图 4-256 























双击 进入 “图 片 2” 页 面 ， 在 该 页 面 中 拖 入 一 个 图 片 元 件 ， 导 入 图 片 ， 调 整 其 坐标 为 


X100、Y95,， 尺 寸 为 W700、H700， 如 图 4-257 所 示 。 页 面 面 板 如 图 4-258 所 示 。 
ETT 3 ITE UE G 





p 








4-257 


使 用 相同 的 方法 继续 在 放大 镜 动态 面板 中 添加 03-09 状态 页 面 ， 并 在 各 个 状态 页 面 中 添加 
图 片 ， 页 面 面 板 如 图 4-259 所 示 。 调 整 放大 镜 动态 面板 下 状态 页 面 的 顺序 ， 如 图 4-260 所 示 。 


outine: 页 面 va 





Outine: 页 面 YQ 
D naex 
[ET LU) 
4 dp naem) 
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4 d o Gne) Li 
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iB e 








4-258 





x Outine: 页面 Ya 
D) index 
iB ma 
ağ SOGAGDEEN) 
4 A Sintel 
N &m 
dp onem) iw 
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返回 index 页 面 ， 查 看 效果 如 图 4-261 所 示 。 在 放大 镜 动态 面板 中 双击 “ 拖 动 时 ”按钮 ， 
如 图 4-262 所 示 。 


的 状态 页 面 就 是 放大 镜 下 面 图 片 放大 的 效果 , 如 果 不 注 意 坐标 和 尺寸 , 图 片 拼接 不 上 ， 
将 不 能 正确 显示 效果 。 


在 “用 例 编辑 ”对 话 框 中 ， 添 加 “移动 ”动作 并 配置 动作 ， 如 图 4-263 所 示 。 继 续 添加 “ 移 
动 ”动作 ， 配 置 动 作 如 图 4-264 所 示 。 


需要 注意 的 是 03~09 状态 页 面 的 具体 尺寸 、 坐 标 以 及 面板 中 图 片 的 具体 坐标 。 制 作 





MM index “ EAER Statet (ndex) X 09/ 图 H9 (ndex) * | 0861 轿 片 8 fndex) * ， 呆 /可 7 fndex) * | 05/ EFS 
o EJ 25 EJ C 00 LJ 












































图 4-263 4-264 


单 击 X 轴 后 面 的 圆 按钮 ， 弹 出 “编辑 值 ”对 话 框 ， 如 图 4-265 所 示 。 单 击 “ 添 加 局 部 变量 ” 
选项 ， 设 置 参 数 如 图 4-266 所 示 。 
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再 次 单 击 “ 


图 4-266 — 


添加 局 部 变量 ”选项 ， 设 置 参数 如 图 4-267 所 示 。 使 用 相同 的 方法 继续 设置 局 
部 变量 ， 如 图 4-268 所 示 。 


用 户 做 到 此 步 时 不 要 急躁 ， 静 下 心 来 为 元 件 设置 变量 ， 如 果 局 部 变量 出 现 问题 ， 全 
局 变量 也 会 出 现 问题 。 


而 RE 
ERBEN IOS XESEXRATESGIT: 
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ETAMERTHAMORESE, REXRRRORETS. Si TAHTO, 
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图 4-268 


将 “编辑 值 ”对 话 框 中 的 0 删除 , 插入 ([]], 如 图 4—269 所 示 。 单 击 “插入 变量 或 函数 … AUR, 
选择 zt 选项 ， 如 图 4-270 所 示 。 
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4-270 


继续 输入 变量 ， 如 图 4-271 所 示 。 单 击 “ 确 定 ” 按 钮 ， 回 到 “用 例 编辑 ”对 话 框 ， 继 续 单 
i Y 轴 后 的 图 按钮 ， 使 用 前 面相 同 的 方法 设置 参数 ， 如 图 4-272 所 示 。 
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图 4-271 图 4-272 


单 击 “确定 ”按钮 ， 回 到 “用 例 编辑 ”对 话 框 ， 继 续 为 其 他 子 动态 面板 中 的 图 片 配置 动作 ， 如 
图 4-273 所 示 。 单 击 “ 确 定 ”按钮 ， 回 到 页 面 编辑 区 , 执行 “预览 ”命令 ， 查 看 效果 , 如 图 4-274 所 示 。 





图 4-273 图 4-274 


返回 index 页 面 ， 在 页 面 中 拖 入 中 继 器 元 件 ， 如 图 4-275 所 示 。 双 击 中 继 器 ， 进 入 中 继 器 
编辑 页 面 ， 编 辑 检视 面板 中 的 “数据 集 ” 标 签 ， 如 图 4-276 所 示 。 
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图 4-275 图 4-276 


单 击 “样式 ”标签 设置 样式 ， 如 图 4-277 所 示 。 删 除 “ 中 继 器 ”页 面 中 的 矩形 元 件 ， 拖 入 
图 片 元 件 ， 调 整 坐标 及 大 小 ， 如 图 4-278 所 示 。 
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4-277 


4-218 


选中 图 片 元 件 , 双击 “鼠标 单 击 时 ”事件 , 如 图 4-279 所 示 。 在 “用 例 编辑 ”对 话 框 中 添加 “ 设 
置 图 片 ”动作 ， 并 配置 动作 ， 如 图 4-280 所 示 。 














片 Name) | i 


4 交互 创建 连接 





图 4-279 


























图 4-280 


单 击 “ 确 定 ”按钮 , 返回 index 页 面 , 选中 中 继 器 元 件 , 双击 Case1, 删除 “设置 文本 ”动作 ， 
添加 “设置 图 片 ”动作 ， 如 图 4-281 所 示 。 单 击 “ 确 定 ” 按 钮 ， 回 到 页 面 编辑 区 ， 如 图 4-282 所 示 。 
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执行 “预览 ”命令 ， 查 看 效果 ， 如 图 4-283 和 图 4-284 所 示 。 


























本 章 主 要 向 用 户 介绍 了 Axure RP 的 交互 事件 ， 交 互 事件 不 仅 可 以 应 用 到 页 面 上 ， 还 可 以 应 用 
到 不 同 的 元 件 上 ， 不 同 的 元 件 有 着 不 同 的 交互 事件 。 通 过 实例 向 用 户 讲解 了 用 例 编辑 器 中 5 类 动作 的 
使 用 方法 ， 通 过 实际 操作 体会 各 个 动作 所 实现 的 效果 ， 同 时 还 向 用 户 介绍 了 Axure RP 中 交互 的 注意 
事项 。 


交互 事件 是 使 用 Axure RP 制作 产品 原型 的 重要 知识 点 。 通 过 本 章 的 学 习 ， 用 户 应 该 可 以 独立 完 
成 简单 的 页 面 交 互 效果 。 







3k 教学 视频 : 视频 \ 第 4 章 \ 绘 制 Tab 页 等 效果 mp4 EU: 源 文件 \ 第 4 章 \ 绘 制 Tab 页 签 效果 .rp 


E XS EE NE 





在 网 页 中 用 户 常常 会 看 到 很 多 LAS i 
标签 的 面板 ， 可 以 同时 加 载 多 条 新 
闻 ， 可 以 在 很 小 的 空间 范围 实现 很 
多 的 内 容 。 本 实例 将 使 用 动态 面板 





"m 


“资讯 “车辆 购置 税 退 税 申请 * 新 车 ”新 款 宝 骏 630 实 车 图 曝光 


En 

实现 Tab 页 签 效果 。 - 推荐 “购买 第 三 者 责任 险 费 用 热门 雷诺 全 新 风景 假想 图 
-ANo MERERI 报价 ”2016 款 歌 诗 图 25.98 万 起 
" 解析 ”车辆 购置 税 申 报 期 限 * 降价 “北汽 307EY 直 降 6.88 万 
Jum sz 机 票 点 卡 FAR | 充 流 里 机 票 点 卡 
8S5 ][ 100 元 ||fef&] 请 输入 手机 号 充值 
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新 建 项 目 文件 ， 拖 外 动态 面板 并 设置 动态 面 为 动态 面板 添加 4 个 状态 页 面 ， 并 为 其 子 页 面 





板 的 位 置 及 名 称 。 添加 图 片 。 
=F F — LJ LJ E 而 w 
wm WE /Sm moen * | WEDE SE mde * Em E m B = BH m nep B 
= Li ez 
| 新 车 热 区 | 
: : | 
; ; ^mm t 
“新 车 MERONE ' 新 车 俐 款 宝 驴 630 实 车 图 曝光 J aesan | 
“ 热门 ”雷诺 全 新 风景 亿 想 加 “热门 雷诺 全 新 风景 假想 图 mcm 
g “ 报价 ”2016 款 歌 尘 图 25,95 万 起 “报价 ”2016 款 歌 诗 图 25.96 万 起 多 omcssmess 
EN E - 降价 “北汽 307EY 直 降 5.s8 万 "E mean 
T -a "R msee 
D a n £ RER | ARM 机 票 点 上 = A 
n i2 IET MGE 
* 充值 | 
4 说 明 





返回 index 页 面 ， 拖 奥 多 个 热 区 元 件 ， 分 别 为 各 个 热 区 元 件 添加 相同 的 交互 事件 ， 实 现 
设置 热 区 的 位 置 和 大 小 。 Tab 页 签 效果 。 
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v^ 元 件 的 使 用 


及 动态 面板 的 创建 o 


本 章 介绍 Axure RP 8.0 的 第 三 方 元 件 库 、 母 版 的 使 用 及 Mc 
外 < . z ` E eR 
动态 面板 的 创建 。 在 Axure RP 中 RAWA, MD MAS 


便 又 快捷 。 在 Axure RP 中 不 仅 可 以 使 用 自 带 的 元 件 ， 还 可 以 v 使 用 母 版 
载 入 第 三 方 元 件 ， 并 且 还 支持 自 定义 元 件 ， 在 团队 合作 中 常常 会 v 动态 面板 


使 用 自 定义 元 件 。 动 态 面板 可 以 制作 出 多 种 效果 








一 个 Axure RP 元 件 可 以 简单 地 理解 为 存储 在 一 个 后 缀 名 为 RPLB 文件 中 的 一 系列 自 定义 元 件 
集 。 这 些 自 定义 元 件 集 可 以 很 大 限度 地 扩展 Axure RP 的 元 件 面 板 。 用 户 可 以 自己 创建 元 件 库 ， 也 可 
以 从 网 上 下 载 他 人 创建 的 元 件 库 。 


在 创建 一 个 移动 或 者 是 响应 式 Web 项 目 时 ， 应 该 使 用 已 有 的 元 件 库 。 在 第 2 章 中 ， 用 户 已 经 了 
解 到 Axure RP 提供 了 默认 元 件 和 流程 图 两 类 元 件 ， 在 默认 元 件 中 又 分 为 基本 元 件 、 表 单元 件 、 菜 单 
和 表格 以 及 标记 元 件 4 类 ， 如 图 5-1 所 示 。 
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在 默认 的 元 件 面板 中 ， 可 以 看 到 有 40 个 元 件 。 
流程 图 元 件 是 在 创建 流程 图 时 使 用 的 ， 流 程 图 元 件 下 有 19 个 元 件 。 在 流程 图 元 件 中 也 有 一 个 图 
片 元 件 ， 这 里 的 图 片 元 件 和 默认 元 件 中 的 图 片 元 件 的 使 用 方法 是 一 样 的 。 



































对 于 元 件 面板 中 各 个 元 件 的 使 用 方法 和 意义 在 第 2 章 中 已 向 用 户 详细 讲解 ， 这 里 不 
再 重复 。 


Axure RP 提供 的 元 件 是 不 能 被 修改 的 ,不 能 在 默认 元 件 和 流程 图 元 件 中 添加 、 修 改 和 删除 元 件 。 
使 用 其 中 的 元 件 ， 为 元 件 添加 样式 ， 可 以 为 项 目 完成 原型 设计 。 













绘制 搜索 框 .mp4 RA: 源 文 件 \ 第 5 章 \ 绘 制 搜索 框 .rp 





实例 分 析 : EJ ~ 
该 实例 主要 使 用 了 文本 标签 元 件 El 





及 动态 面板 元 件 ， 对 动态 面板 添加 显 
示 、 选 中 动作 ， 并 且 为 交互 事件 应 用 
了 样式 。 ees 





制作 步骤 : 


执行 “文件 > 新 建 ”命令 ， 新建 一 个 项 目 文档 ， 如 图 5-2 所 示 。 将 元 件 面板 中 的 文本 标签 
元 件 拖 遇 到 页 面 编辑 区 内 ， 调 整 坐标 为 X30、Y65， 尺 十 为 W51、H26， 如 图 5-3 所 示 。 























Marea Ane RR. Emenee te CI IE 
Er 
Laar a Eon M 
pi zj > LIST 
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J 
We 
hg ccm 
EF-—-É] 
图 5-2 图 5-3 





设置 字体 为 Arial， 字 号 为 13 号 ， 显 示 文字 为 宝贝 ， 设 置 本 文 标签 的 对 齐 方 式 为 水 平 居 中 对 
齐 和 垂直 居中 对 齐 ， 如 图 5-4 所 示 。 使 用 相同 的 方法 绘制 其 他 文本 标签 ， 如 图 5-5 所 示 。 
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图 5-4 








继续 拖 折 动态 面板 元 件 到 页 面 编辑 区 中 ， 调 整 该 动态 面板 的 坐标 为 X30、Y101， 尺 才 为 
W720、H39， 如 图 5-6 所 示 。 将 该 动态 面板 重 命名 为 “搜索 框 ”， 双 击 该 动态 面板 ， 弹 出 “动态 面 


板 状态 管理 ”对 话 框 ， 如 图 5-7 所 示 。 
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图 5-7 
在 “动态 面板 状态 管理 ”对 话 框 中 添加 3 个 页 面 ， 如 图 5-8 所 示 。 双 击 动态 面板 中 的 “宝贝 ” 
状态 页 面 ， 进 入 编辑 页 面 ， 如 图 5-9 所 示 。 
































Come J( o» | 














第 5 章 元 件 库 、 母 版 的 使 用 及 动态 面板 的 创建 


GS AB 1 元件 进入 搜索 框 /宝贝 页 面 ， 调 整 坐标 为 X0、Y0， 尺 寸 为 W720、H39， 1858 
形 填 充 颜 色 为 #F82800， 如 图 5-10 所 示 。 继 续 拖 入 一 个 文本 框 元 件 ， 调 整 坐标 为 X3、Y3， 尺 寸 
为 We16、 H33， ， 将 矩形 填充 颜色 为 #FFFFFF, 隐藏 边框 ， 如 图 5-11 所 示 。 
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图 5-10 图 5-11 


继续 拖 入 一 个 矩形 元 件 ， 设 置 该 矩形 的 坐标 为 X629、Y0， 尺 寸 为 W81、H35， 将 矩形 盾 
充 颜色 为 #F28200， 并 输入 文字 “搜索 ”， 如 图 5-12 所 示 。 继续 拖 入 一 个 图 片 元 件 ， 导入 “素材 \ 第 
5 章 \001.jpg” 图 片 ， 调 整 坐 标 为 X11、Y7， 尺 寸 为 W19、H25， 如 图 5-13 所 示 。 
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图 5-12 图 5-13 
继续 拖 入 一 个 图 片 元 件 并 双击 导入 图 片 ， 如 图 5-14 所 示 。 页 面 面 板 如 图 5-15 所 示 。 
Outine; 页 面 Ya 
D index 
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图 5-14 图 5-15 








选中 “宝贝 - 搜索 输入 框 ”元 件 ， 双 击 “ 文 本 改变 时 ”事件 ， 进 入 “用 例 编辑 ”对 话 框 ， 在 
添加 动作 中 选择 “隐藏 ”动作 并 配置 动作 ， 如 图 5-16 所 示 。 单 击 “确定 ”按钮 ， 返 回 编辑 页 面 ， 
双击 “失去 焦点 时 ”事件 ， 进 入 “用 例 编辑 ”对 话 框 ， 在 添加 动作 中 选择 “显示 ”动作 并 配置 动作 ， 
如 图 5-17 所 示 。 






































图 5-16 图 5-17 
继续 添加 “ 置 于 顶层 ” 动作 并 配置 动作 , 如 图 5-18 所 示 。 单 击 “确定” 按钮, 回 到 页 面 编辑 区 ， 
效果 如 图 5-19 所 示 。 
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5-18 5-19 
使 用 相同 的 方法 制作 “天 猫 "状态 页 面 和 “店铺 ”状态 页 面 , 如 图 5-20 所 示 。 返回 index 页 面 ， 
如 图 5-21 所 示 。 
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图 5-20 5-21 


选中 “天 猫 ”文本 标签 元 件 ， 双 击 “ 鼠 标 单 击 时 ”事件 ， 进 入 “用 例 编辑 ”对 话 框 ,添加 “ 选 
中 ”动作 并 配置 动作 ， 如 图 5-22 所 示 。 继 续 添加 “选中 ”动作 并 配置 动作 ， 如 图 5-23 所 示 。 
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5-22 图 5-23 


继续 添加 “设置 面板 状态 ”动作 并 配置 动作 ， 如 图 5-24 所 示 。 继 续 添加 “获取 焦点 ”动作 
并 配置 动作 ， 如 图 5-25 所 示 。 
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5-24 j 图 5-25 
单 击 “ 确 定 "按钮 , 回 到 页 面 编辑 区 , 选中 “天 猫 "文本 标签 元 件 , 在 “检视 : ER” 面板 的 “ 属 
性 ”标签 的 交互 样式 设置 中 单 击 “鼠标 悬 停 ” 选 项 ， 如 图 5-26 所 示 。 弹 出 “设置 交互 样式 ”对 话 框 ， 
设置 参数 如 图 5-27 所 示 。 
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继续 选择 “选中 ”选项 , 设置 参数 如 图 5-28 所 示 。 执行 “预览 ”命令 ， 查 看 效果 , 如 图 5-29 
所 示 。 
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使 用 相同 的 方法 为 “宝贝 ”文本 标签 元 件 和 “店铺 ”文本 标签 元 件 应 用 相同 的 事件 和 相同 的 
动作 ， 如 图 5-30 和 图 5-31 所 示 。 
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单 击 “确定 ”按钮 ， 回 到 index 页 面 中 ， 继 续 为 “宝贝 ”文本 标签 元 件 和 “店铺 ”文本 标签 
元 件 设置 交互 样式 ， 如 图 5-32 和 图 5-33 所 示 。 
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图 5-32 图 5-33 





























图 5-34 图 5-35 
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用 鼠标 单 击 “ 店 铺 ” 可 以 看 到 如 图 5-36 所 示 的 效果 ， 还 可 以 输入 文本 ， 如 图 5-37 












































在 Axure RP 8.0 中 新 增 了 默认 的 标记 元 件 ， 标 记 顾 名 思 义 就 是 起 到 提示 的 作用 ， 本 节 重 点 向 用 
户 讲解 新 增 的 标记 元 件 ， 如 图 5-38 所 示 。 
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图 5-38 


5.2.1 页 面 快 照 的 使 用 方法 


在 第 2 章 中 已 经 向 用 户 讲解 了 各 个 标记 元 件 的 作用 和 意义 ， 下 面向 用 户 具 体 讲解 页 面 快照 元 件 的 
使 用 方法 。 

页 面 快照 元 件 可 用 于 展示 交互 行为 中 每 一 步 的 进展 图 解 ， 或 者 用 于 流程 图 添加 缩 略 图 。 可 以 在 
标记 元 件 中 看 到 页 面 快照 元 件 ， 也 可 以 在 流程 图 元 件 中 看 到 页 面 快照 元 件 ， 两 者 的 使 用 方法 是 一 
样 的 。 

打开 “素材 \ 第 5 章 \ 登 录 及 注册 .rp" 文 件 , 如 图 5-39 所 示 。 将 页 面 快照 元 件 拖 踊 到 页 面 编辑 区 内 ， 
如 图 5-40 所 示 。 

双击 页 面 快照 元 件 ， 打 开 “ 引 用 页 面 ” 对 话 框 ， 如 图 5-41 所 示 。 选 择 index 页 面 ， 单 击 “ 确 定 ” 
按钮 ， 会 弹出 提示 对 话 框 ， 如 图 5-42 所 示 。 
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图 5-41 


页 面 以 外 的 其 他 页 面 。 


继续 在 “引用 页 面 ”对 话 框 中 选择 “ 找 回 密码 ”页 面 ， 如 图 5-43 所 示 。 单 击 “ 确 定 ” 按 钮 ， 会 
弹出 如 图 5-44 所 示 的 页 面 快照 元 件 。 


页 面 快照 不 能 引用 主页 ， 也 不 能 引用 页 面 快照 所 在 的 页 面 ， 只 能 引用 除 主页 和 所 在 


Funtouch 











图 5-43 5-44 
用 户 会 看 到 页 面 快照 的 内 容 和 “ 找 回 密码 ”页 面 的 内 容 是 一 样 的 ， 如 图 5-45 所 示 。 再 次 双击 页 
面 快照 元 件 ， 可 以 更 改 引用 的 页 面 。 
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: ASJU EPE BK 。 (注册 大 小 写 ) 





图 5-45 


如 果 对 引用 的 页 面 内 容 进行 了 编辑 ， 页 面 快照 捕捉 的 内 容 也 会 随 之 更 新 。 


5.2.2 ”适应 比例 


页 面 快照 的 默认 属性 是 适应 比例 的 , 如 图 5-46 所 示 。 也 就 是 说 当 用 户 使 用 页 面 快照 引用 页 面 时 ， 
捕捉 的 内 容 将 按 比例 放置 在 快照 元 件 内 ， 不 管 将 页 面 快照 元 件 的 尺寸 放置 多 大 ， 引 用 页 面 的 图 像 将 合 
理 地 缩放 到 快照 元 件 所 划 定 的 范围 以 内 ， 而 且 页 面 快照 元 件 里 的 内 容 不 能 移动 ， 如 图 5-47 所 示 。 
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图 5-46 图 5-47 
用 户 可 以 取消 选择 “适应 比例 ”选项 ， 显 示 效 果 如 图 5-48 所 示 。 取 消 选择 “适应 比例 ”选项 后 ， 
用 户 还 可 以 对 捕捉 图 像 的 坐标 和 缩放 比 尺寸 进行 调整 ， 如 图 5-49 所 示 。 
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取消 选择 “适应 比例 ”选项 , 将 光标 移动 到 页 面 快照 元 件 上 , 当 鼠 标 变 成 小 手 的 状态 时 , 如 图 5-50 
所 示 。 
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图 5-50 


此 时 可 在 元 件 内 部 拖 动 引用 页 面 来 调整 需要 显示 的 页 面 区 域 ， 比 手动 设 定 页 面 的 显示 坐标 的 方式 
要 更 方便 ， 也 可 以 通过 “坐标 设置 ”改变 被 引用 页 面 的 显示 坐标 。 可 以 在 属性 标签 中 直接 输入 引用 页 
面 的 X、Y 轴 坐 标 值 ， 或 者 双击 快照 元 件 后 拖 动 其 中 的 页 面 来 调整 。 


5.2.3 ”放大 和 缩小 


用 户 可 以 对 页 面 快照 元 件 引 用 页 面 的 图 像 进行 自由 放大 和 缩小 。 该 功能 对 页 面 中 的 特定 部 分 进行 
放大 和 缩小 是 非常 有 用 的 。 

使 用 属性 选项 的 缩放 属性 可 对 缩放 比例 进行 设置 。 也 可 以 双击 快照 组 件 ， 使 用 鼠标 滑轮 来 进行 放 
大 缩小 ， 如 图 5-51 所 示 。 





5-51 


如 果 鼠 标 没有 滑轮 ， 可 以 按 快捷 键 Ctrl++ 或 快捷 键 Ctrl+- 来 进行 缩放 调整 。 只 有 
在 取消 “适应 比例 ”的 状态 下 ， 才 可 以 进行 缩放 调整 。 


5.2.4 设置 动作 


在 页 面 快照 的 属性 标签 下 ， 可 以 为 快照 添加 应 用 的 交互 行为 ， 如 图 5-52 所 示 。 
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5-52 














图 5-53 


UE) eem semaines. 


5.2.5 ”页面 快照 的 交互 行为 


页 面 快照 元 件 拥有 和 其 他 元 件 一 样 的 交互 行为 。 在 默认 情况 下 ， 在 生成 的 原型 中 单 击 快照 即 可 打 
开 原 型 的 引用 页 面 ， 如 图 5-54 所 示 。 
用 户 可 以 在 HTML 生成 器 的 交互 部 分 关闭 这 个 行为 。 执 行 “发 布 > 生成 HTML 文件 ”命令 ， 如 
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图 5-55 所 示 。 弹 出 “生成 HTML” 对 话 框 ， 在 该 对 话 框 中 选择 “交互 ”选项 ， 取 消 “点 击 元 件 时 打 
开 引 用 页 ”选项 的 选择 ， 如 图 5-56 所 示 。 
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图 5-55 图 5-56 


如 果 在 页 面 快照 元 件 中 添加 了 一 个 “鼠标 单 击 时 ”的 交互 行为 ， 那 么 链接 到 引用 页 
面 的 行为 将 会 被 这 个 交互 行为 所 蔡 代 。 


页 面 快照 元 件 是 Axure RP 8.0 的 新 增 功能 ， 在 很 多 方面 还 不 是 很 完善 ， 如 果 在 一 
个 页 面 中 添加 多 个 页 面 快照 元 件 ， 就 会 对 程序 造成 不 良 的 影响 。 


5.2.6 ”其 他 标记 元 件 


新 增 的 标记 元 件 不 仅 有 页 面 快照 元 件 ， 还 有 水 平 箭头 、 垂 直 箭头 和 便签 等 元 件 ， 它 们 的 使 用 方法 
和 上 默认 的 元 件 一 样 ， 拖 鬼 到 页 面 编辑 区 内 ， 即 可 进行 编辑 。 





f£ Axure RP 中 不 仅 可 以 使 用 默认 元 件 ， 还 可 以 使 用 载 入 的 第 三 方 元 件 库 。 用 户 可 以 在 互联 网 
&120 
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上 找到 很 多 的 第 三 方 元 件 库 。 如 iOS 操作 系统 的 小 组 件 、Android 组 件 和 Windows 组 件 等 元 件 库 ， 
如 图 5-57 和 图 5-58 所 示 。 
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图 5-57 图 5-58 


通过 访问 http://www.axure.com/community/widget-libraries 可 以 查看 下 载 第 三 
方 元 件 库 。 


Spj| RA OS 系统 元 件 库 








24 教学 视频 : 视频 \ 第 5 章 \ 载 入 iOS 系统 元 件 库 .mp4 源 文件 : 无 
实例 分 析 : = 
该 实例 向 用 户 讲解 载 入 第 三 方 元 — 
件 库 的 方法 。 以 载 入 iOS 系统 元 件 库 LD 
为 例 ， 全 面 地 展示 了 Axure RP 使 用 nas 
第 三 方 元 件 的 方法 。 LLL UN 




















制作 步骤 : 


执行 “文件 > 新建 ”命令 ， 新建 一 个 项 目 文档 ， 如 图 5-59 所 示 。 单 击 元 件 面板 中 的 “选项 ” 
按钮 ， 弹 出 下 拉 莱 单 ， 如 图 5-60 所 示 。 

在 下 拉 菜 单 中 选择 “ 载 入 元 件 库 ”命令 ， 弹 出 “打开 ”对 话 框 ， 在 该 对 话 框 中 用 户 可 以 选择 
需要 的 元 件 库 ， 如 图 5-61 所 示 。 单 击 “ 打 开 ” 按 钮 ， 弹 出 “进度 ”对 话 框 ， 如 图 5-62 所 示 。 

在 元 件 面板 中 即 可 看 到 载 入 的 元 件 ， 如 图 5-63 所 示 。 
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第 5 章 元 件 库 、 母 版 的 使 用 及 动态 面板 的 创建 


使 用 已 经 载 入 的 元 件 库 ， 与 Axure RP 自 带 的 元 件 库 中 的 元 件 是 一 样 的 ， 只 要 拖 多 
到 页 面 编辑 区 内 就 可 以 使 用 。 


载 入 的 第 三 方 元 件 库 只 能 应 用 到 打开 的 项 目 文件 中 ， 想 要 在 更 多 的 项 目 文件 中 使 用 
第 三 方 元 件 库 ， 需 要 重复 载 入 。 





在 很 多 时 候 ， 用 户 可 以 创建 自己 的 元 件 库 ， 例 如 在 和 其 他 设计 师 合作 某 个 项 目 时 需要 保证 项 目的 
一 致 性 和 完整 性 ， 用 户 可 以 创建 一 个 自己 的 元 件 库 。 


5.4.1 创建 一 个 元 件 库 


Axure RP 的 元 件 库 文件 和 项 目 文件 的 文件 格式 不 同 ， 在 第 2 章 已 经 向 用 户 详细 讲解 ， 这 里 的 元 
件 库 文件 和 链接 到 库 文件 的 项 目 文件 是 相互 独立 的 。 

用 户 想 要 创建 一 个 新 的 库 ， 必 须 创建 一 个 新 的 RP 项 目 文件 或 者 打开 一 个 已 有 的 RP 项 目 
文件 。 










实例 和 ”创建 库 文件 
25 教学 视频 : 视频 \ 第 5 章 \ 创 建 库 文件 .mp4 源 文件 : 源 文件 \ 第 5 章 \ 创建 库 文件 .rp 


实例 分 析 : 

用 户 可 以 创建 属于 自己 的 元 件 
库 ， 并 能 在 .rp 文件 中 使 用 。 元 件 库 f - 
的 格式 通常 为 .rplib。 本 实例 主要 讲 I NN 
解 在 绘制 元 件 库 之 前 如 何 创建 一 个 正 | = 
确 的 项 目 格式 文件 。 i = 








制作 步骤 : 


执行 “文件 > 新 建 ”命令 ， 新 建 一 个 项 目 文件 ， 如 图 5-64 所 示 。 单 击 元 件 面板 中 的 “选项 ” 
按钮 ， 弹 出 下 拉 菜 单 ， 如 图 5-65 所 示 。 

在 下 拉 菜 单 中 选择 “创建 元 件 库 ” 命 令 ， 弹 出 “保存 Axure RP 元 件 库 ” 对 话 框 ， 在 该 对 话 
框 中 用 户 可 以 将 其 保存 在 想 要 保存 的 目录 下 ， 如 图 5-66 所 示 。 用 户 在 其 目录 下 可 以 看 到 新 建 的 元 件 
库 文 件 ， 如 图 5-67 所 示 。 
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5.4.2 ”认识 元 件 库 界面 


继续 上 面 的 实例 ， 打 开 新 建 的 元 件 库 ， 如 图 5-68 所 示 。 工 作 界 面 和 RP 项 目 文件 的 工作 界面 很 
相似 。 

用 户 初次 见 到 元 件 库 的 工作 界面 会 认为 和 项 目 文件 的 工作 界面 是 一 样 的， 界面 中 相同 的 部 分 不 再 
详细 讲解 ， 接 下 来 介绍 其 中 不 同 的 部 分 。 

在 元 件 库 工作 界面 的 工具 栏 中 不 再 有 AxShare 共享 菜单 ( 灰色 状态 ) ， 如 图 5-69 所 示 。 

元 件 管理 面板 蔡 代 了 页 面 管理 面板 ， 如 图 5-70 所 示 。 





第 5 章 元 件 库 、 母 版 的 使 用 及 动态 面板 的 创建 


工具 栏 
元 件 管理 面板 检视 区 域 (分 为 
属性 标签 和 样 
式 标签 ) 
元 件 面板 
母 版 面板 
概要 面板 





页 面 编辑 区 域 ( 线 框图 编辑 区 ) 
5-68 








图 5-70 
在 元 件 管理 面板 中 用 户 也 可 以 添加 、 删 除 、 重 命名 元 件 页 面 ， 如 图 5-71 所 示 。 
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移动 互联 网 之 路 一 一 AXure RP 8.0 网 站 与 APP 原型 设计 从 入 门 到 精通 





在 元 件 库 工 作 界面 的 “检视 : 页 面 ”面板 中 只 有 “属性 ”标签 , 没有 了 “样式 ”标签 , 如 图 5-72 
所 示 。 项 目 文件 工作 界面 的 “检视 : 页 面 ”面板 如 图 5-73 所 示 。 两 个 检视 面板 中 属性 的 内 容 也 不 同 。 























* eamm en mm 
ze rax 
> Ba 
E "y R men 
> 提示 信息 ( 星 示 在 元 件 面板 ) "m eneston 
"R enmen 
>》 页 面 说 明 A 
图 5-72 图 5-73 


5.4.3 BEXT 


继续 前 面 实例 的 绘制 , 选中 元 件 管理 面板 中 的 “新 元 件 1”, 并 重 命名 为 “笑脸 ”, 如 图 5-74 所 示 。 
在 “检视 : 页 面 ”面板 的 “提示 信息 ”属性 下 输入 元 件 的 名 称 为 “疑问 ”， 如 图 5-75 所 示 。 
^ WigetlbrayPeges P) Œ Q € 








图 5-74 图 5-75 


在 页 面 中 拖 岛 一 个 图 片 元 件 ， 并 导入 “素材 \ 第 5 章 \003.jpg” 图 片 ， 如 图 5-76 所 示 。 选 中 页 
面 编辑 区 中 的 元 件 ， 在 “检视 : 图 片 ”面板 中 设置 元 件 的 样式 ， 如 图 5-77 所 示 。 


























Are Er n 
j E z 
x0 yo | i 
w 118 H 140 | 
ee a 
RO ro | 
I omm 
Image -È 
> BE -- 
4 边框 
图 5-76 图 5-77 
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单 击 “ 管 理 元 件 样式 ”按钮 ， 打 开 “ 元 件 样式 编辑 ”对 话 框 ， 如 图 5-78 所 示 。 在 该 对 话 框 中 添 
加 一 个 新 的 样式 为 “图 片 ”， 如 图 5-79 所 示 。 






























































texts 
BRA. = 
EE 字体 
有 - | Normal 5 text EBEERGRIER, 
一 级 标题 z € A 
二 级 标题 nm Fon Aia 
三 级 标题 T =x ormat 
EL | 一 : 可 7 o. 
pom 1! | sma rome [T] esso 
四 级 标题 [E73 [y 
E] Cors LEEST 
ARE 
ICEESR F srme i> B 
kb: —1 E sue : | 
= -一 E aw ll 
图 5-78 图 5-79 
设置 其 样式 ， 如 图 5-80 所 示 。 单 击 “确定 ”按钮 ， 元 件 效果 如 图 5-81 所 示 。 
后 mE 
pon -eo M 
o 100 
十 略 X 全 le 
LU | ` 
-— 
一 级 标题 
二 级 标题 
三 级 标题 
四 级 你 中 | 
Aun B 
EE 
图 片 E 
5-81 





E 在 绘制 元 件 时 注意 风格 要 统一 ， 不 要 突出 个 性 化 。 


于 “文件 > 保存 ”命令 ， 将 绘制 的 元 件 保存 。 返 回 项 目 文件 ， 在 新 建 的 项 目 文件 中 刷新 元 件 库 ， 
ae 如 图 5-82 所 示 。 


3 


' a 
5.4.4 在 项 目 文件 中 刷新 元 件 库 EE s 
sum 

前 面 就 已 经 向 用 户 提 过 ， 元 件 库 文件 和 原型 项 目 文件 是 独立 存 S 
在 的 ， 在 元 件 库 中 添加 新 元 件 、 修 改 已 有 的 元 件 或 者 使 用 下 载 的 第 
三 方 元 件 库 ,改变 的 元 件 都 不 会 自动 在 项 目 文件 中 更 新 ,需要 单 击 “ 刷 
新 元 件 库 ”才能 对 元 件 库 进行 刷新 。 f 

单 击 元 件 库 中 的 “选项 ”按钮 , 在 下 拉 菜 单 中 选择 “刷新 元 件 库 ” 图 5-82 
命令 ， 即 可 刷新 ， 如 图 5-83 所 示 。 
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Dg 使 有 版 
页 面 中 的 一 些 元 素 有 时 需 在 很 多 页 面 中 出 现 ， 如 网 站 的 页 头 或 者 “三 了 | 

页 脚 等 ， 用 户 可 以 通过 创建 母 版 来 绘制 页 面 中 重复 的 元 素 。 ZEN eu 
1. 常见 的 母 版 载 入 元 件 库 …<L> 
一 般 来 说 ， 一 个 页 面 项 目的 如 下 部 分 可 以 制作 为 主 元 件 。 €—ÁÀ 
e S. 编辑 元 件 库 .…<E> 
e 网 站 Header ( 头 部 ) ， 包 括 网 站 的 Logo. 
e 网 站 Footer (尾部 ) 。 a= ee 
e ”经 常 重复 出 现 的 元 件 ， 例 如 分 享 按钮。 eas 
e Tab 面板 切换 的 元 件 ， 在 不 同 页 面 中 同一 个 Tab 面板 有 不 

同 的 呈现 。 

2. 使 用 母 版 的 好 处 


保持 整体 界面 设计 的 一 致 性 。 

对 母 版 进行 修改 ， 所 有 相关 的 页 面 会 立即 更 新 ， 能 节省 大 量 时 间 。 

母 版 页 面 的 说 明 只 需要 编写 一 次 ， 避 免 在 输出 UI 规范 文档 时 造成 额外 的 工作 、 元 余 和 
错误 。 

减 小 Axure RP 文件 的 大 小 ， 因 为 母 版 减少 了 大 量 匈 余 的 元 件 。 


5.5.1 创建 母 版 内 容 


执行 “文件 > 新建” 命令， 新建 一 个 项 目 文件 ， 如 图 5-84 所 示 。 拖 时 一 个 矩形 1 元 件 到 页 面 


编辑 区 内 ， 设 置 元 件 的 坐标 为 X0、Y0， 尺 寸 为 W1584、H50， 如 图 5-85 所 示 。 
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图 5-84 图 5-85 
将 该 元 件 填充 颜色 为 #0099FF ， 边 框 颜色 为 无 ， 如 图 5-86 所 示 。 
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图 5-86 


继续 将 一 个 文本 标签 元 件 拖 入 到 页 面 中 ， 设 置 文本 标签 的 坐标 为 X387、Y16， 尺 寸 为 W27、 
H15， 字 体 为 宋体 ， 字 号 为 13 号 ， 字 体 颜色 为 白色 ， 显 示 文 本 为 首页 ， 如 图 5-87 所 示 。 使 用 相同 
的 方法 制作 其 他 文本 标签 ， 如 图 5-88 所 示 。 


|xs |w|w (jw jew 














图 5-87 5-88 
继续 拖 入 一 个 矩形 1 元 件 ， 填 充 颜色 为 白色 ， 边 框 颜色 为 无 ， 调 整 元 件 的 坐标 为 X424、Y18， 
尺寸 为 W3、H15， 如 图 5-89 所 示 。 在 页 面 编辑 区 中 拖 折 垂直 的 辅助 线 ， 如 图 5-90 所 示 。 


Je *IT&STZ [VT TA Fe] [9 


















































图 5-90 
在 辅助 线 的 位 置 继续 拖 入 白色 矩形 元 件 ， 隐 藏 辅助 线 ， 效 果 如 图 5-91 所 示 。 
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使 用 相同 的 方法 制作 其 他 部 分 ， 将 所 有 的 元 件 进行 组 合 ， 如 图 5-92 所 示 。 至 此 完成 一 个 母 版 文 
件 的 创建 。 


index 





图 5-92 
以 上 简单 向 用 户 介绍 了 母 版 的 创建 方式 ， 除 此 之 外 ， 还 可 通过 单 击 母 版 面板 上 的 “添加 母 版 ” 按 
钮 ， 完 成 母 版 的 添加 ， 如 图 5-93 所 示 。 将 新 添加 的 母 版 重 命名 为 “页 尾 ”， 如 图 5-94 所 示 。 








mM a eu Dama 
D rsa [ams] D mm 

















图 5-93 图 5-94 
双击 页 尾 母 版 ， 进 入 “页 尾 母 版 ”编辑 页 面 ， 在 编辑 区 中 绘制 母 版 内 容 ， 如 图 5-95 所 示 。 








5-95 


Sy] 创建 某 网 页 的 页 头 


2 6 教学 视频 视频 \ 第 5 章 \ 创 建 某 网 页 的 页 头 .mp4 ” 源 文 件 源 文件 \ 第 5 章 \ 创 建 某 网 页 的 页 头 .rp 





实例 分 析 : 
通常 一 个 网 站 的 页 头 nuuc mom E x ; 
部 分 会 出 现在 网 页 中 的 所 有 - T WEE TEM GRAN VUE TRECE 


页 面 上 ， 所 以 可 以 通过 将 页 
头 制作 成 母 版 ， 供 其 他 页 面 
调用 ， 这 样 既 减少 了 制作 工 
作 ， 又 提高 了 浏览 速度 。 
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制作 步骤 : 


执行 “文件 > 新 建 ”命令 ， 新 建 一 个 项 目 文件 ， 如 图 5-96 所 示 。 单 击 母 版 面板 中 的 “ 添 
加 母 版 ”按钮 ， 如 图 5-97 所 示 。 
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图 m 
| 添加 母 版 
" 
图 5-96 图 5-97 


将 新 建 的 母 版 命名 为 “页 头 ”， 如 图 5-98 所 示 。 双 击 “页 头 ” 母 版 ， 进 入 母 版 的 编辑 页 面 ， 
如 图 5-99 所 示 。 
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图 5-98 图 5-99 
ERNEK 1 元件 到 页 面 编辑 区 内 ， 设 置 元 件 的 坐标 为 X0、Y0， 尺 寸 为 W1337、 
H30， 填 充 颜色 为 #F1F1F1， 边 框 颜色 为 无 ， 如 图 5-100 所 示 。 继 续 拖 入 一 个 文本 标签 元 件 ， 设 
置 坐标 为 X76、Y7， 尺 寸 为 W61、H14， 字 体 为 宋体 ， 字 号 为 12 号 ， 显 示 文字 为 “ 送 至 : 北京 ”， 
如 图 5-101 所 示 。 
































图 5-100 图 5-101 


使 用 相同 的 方法 继续 绘制 其 他 元 件 ， 效 果 如 图 5-102 所 示 。 继 续 拖 入 一 个 矩形 1 元 件 ， 设 
置 元 件 的 填充 颜色 为 #F7F7F7， 边 框 颜色 为 无 ， 如 图 5-103 所 示 。 
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图 5-102 图 5-103 


调整 元 件 的 坐标 为 X617、Y8， 尺 寸 为 W4、H15， 如 图 5-104 所 示 。 使 用 相同 的 方法 绘 
制 其 他 元 件 ， 如 图 5-105 所 示 。 





1 Fi -AA , Po eor 
请 登录 免费 注册 | Roa S -I€— — 
) mm AR~ * REA ARA 。 日 手机 京东 00 关注 章 车 FERS FARR ~ 
图 5-104 图 5-105 


继续 拖 入 一 个 图 片 元件 ， 导 入 “素材 \ 第 5 章 \005.jpg” 图 片 ， 如 图 5-106 所 示 。 使 用 相 
同 的 方法 导入 Logo 图 片 ， 如 图 5-107 所 示 。 
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EE: 北京 ~ i 
mmm E3 Ea T E Es T - 
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"y DES ens 
图 5-106 图 5-107 


继续 拖 入 一 个 动态 面板 元 件 ， 设 置 坐标 为 X425、Y133， 尺 寸 为 W514、H40， 如 图 5-108 
所 示 。 双 击 动态 面板 ， 在 “动态 面板 状态 管理 ”对 话 框 中 设置 参数 ， 如 图 5-109 所 示 。 








Fim 
| 


AA AISEE 












































图 5-108 5-109 
进入 “输入 状态 ”页 面 ， 在 该 页 面 中 拖 入 和 矩形 1 元 件 ， 设 置 坐标 为 X425、Y133， 尺 十 为 
W514, H40, 填充 颜色 为 # B71C1C, 边框 颜色 为 无 , 如 图 5-110 所 示 。 继续 拖 入 一 个 文本 框 元 件 ， 
调整 坐标 为 X3、Y3， 尺 寸 为 W437、H33， 填 充 颜色 为 白色 ， 隐 藏 边框 ， 如 图 5-111 所 示 。 
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继续 拖 入 一 个 提交 按钮 元 件 ， 设 置 坐标 为 X450、Y2， 尺 寸 为 W81、H35， 字 体 为 宋体 ， 
字号 为 20 号 ， 显 示 文字 为 搜索 ， 如 图 5-112 所 示 。 返 回 “ 页 头 ” 页 面 ， 效 果 如 图 5-113 所 示 。 
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图 5-112 
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图 5-113 


在 “页 头 ”页 面 中 继续 制作 文本 标签 元 件 ， 如 图 5-114 所 示 。 使 用 相同 的 方法 绘制 其 他 文 


本 标签 元 件 ， 如 图 5-115 所 示 。 
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KI 5-114 5-115 
使 用 相同 的 方法 绘制 其 他 元 件 ， 如 图 5-116 所 示 。 页 头 母 版 的 内 容 如 图 5-117 所 示 。 








Cg 我 的 购物 车 > 
5-116 5-117 


返回 index 页 面 , 3e aL 8H o SUB DX P3, 如 图 5-118 所 示 。 执 行 “ 预 览 " 命令 , 查看 效果 ， 
如 图 5-119 所 示 。 
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En P^ 
FIDi [LEN viet 


ERICH Gor GE WENE TR OUS EIERE 


图 5-119 


在 制作 母 版 的 时 候 , 也 可 以 将 母 版 中 的 元 件 应 用 交互 事件 。 将 母 版 应 用 到 原型 设计 中 ， 
交互 事件 也 会 同时 被 带 到 原型 设计 区 域 。 


5.5.2 ”转换 为 母 版 


继续 上 节 的 操作 ， 选 中 所 绘制 的 原型 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “转换 为 母 版 ”命令 ， 
如 图 5-120 所 示 。 弹 出 “转换 为 母 版 ”对 话 框 ， 如 图 5-121 所 示 。 
































Re ar 
Hy 复制 <C> 
Iosue 
RRSEUR , 
dg sem z] 
—— -— - 
注意 : 与 这 些 元 件 关 联 的 交互 将 需要 更 新 ， 
mime sae SRI] 
E 组 合 <G> Ctrl+G 拖 放 行为 
其 [取消 组 合 <U> Ctrl+Shift+G © 任何 位 置 
O 国定 位 置 
mo : O RESH 
WEXCSERI 
5-120 5-121 


继续 前 面 的 操作 ， 分 别 将 绘制 的 原型 内 容 转换 母 版 ， 分 别 设置 拖 放行 为 为 “任何 位 置 ”、“ 固 定 
位 置 ” 和 “脱离 母 版 ”， 如 图 5-122 所 示 。 











5-122 


1. 任何 位 置 
任何 位 置 行为 是 母 版 的 默认 行为 ， 将 母 版 拖 入 原型 编辑 区 中 的 任意 位 置 ， 当 修改 母 版 时 ， 所 有 
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引用 该 母 版 的 原型 设计 图 中 的 母 版 实例 都 会 同步 更 新 ， 只 有 坐标 不 会 同步 。 下 面 实际 操作 为 用 户 
讲解 。 


母 版 实例 就 是 引用 母 版 中 的 元 件 内 容 。 


新 建 “ 母 版 logo” 母 版 ， 如 图 5-123 所 示 。 双 击 进入 “ 母 版 logo” 编 辑 页 面 ， 在 该 页 面 中 拖 
入 一 个 图 片 元 件 ， 并 导入 图 片 ， 如 图 5-124 所 示 。 


= ama) eu] BEEN 


[7 8H logo 上 " 








100 























图 5-123 图 5-124 


查看 图 片 元 件 的 坐标 为 X200、Y0, 尺寸 为 W118、H180, 如 图 5-125 所 示 。 返回 index 页 面 ， 
在 编辑 区 中 输入 文字 ， 并 将 “和 母 版 lI0go” 拖 灸 到 编辑 区 内 ， 效 果 如 图 5-126 所 示 。 用 户 可 以 将 母 版 























logo 实例 随意 放置 在 任何 位 置 。 
v x 检视 : 图 片 n 
ae 
4 位 置 "尺寸 1 
选中 的 元 件 | 
x 200 yo 
w |118 H 180 
| 保持 窒 高 比例 
RO T0 
re 。 ARAG saannon 
Image -BD 
图 5-125 5-126 


母 版 实例 在 原型 页 面 中 显示 粉色 ， 只 要 是 母 版 的 内 容 拖 昕 到 原型 设计 中 ， 都 会 显示 
为 粉色 。 


用 户 可 以 更 改 logo 的 坐标 , 却 不 能 更 改 其 尺寸 , 在 检视 面板 中 尺寸 为 灰色 状态 , 如 图 5-127 所 示 。 
在 原型 设计 中 ， 当 Iogo 需要 更 换 内容 时 ， 需 要 进入 母 版 进行 更 改 ， 在 原型 编辑 页 面 中 是 不 能 更 改 的 。 
双击 index 页 面 中 的 母 版 实例 ， 即 可 进入 “ 母 版 logo” 页 面 ， 如 图 5-128 所 示 。 
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默认 TY- k 
图 5-127 图 5-128 


用 户 也 可 以 双击 母 版 面板 中 的 “ 母 版 logo” 页 面 进入 编辑 区 。 


将 “ 母 版 logo” 图 片 更 改 为 如 图 5-129 所 示 。 返 回 index 页 面 ， 效 果 如 图 5-130 所 示 。 


EEE 


o 100 
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100 

















图 5-129 


坐标 位 置 如 图 5-131 所 示 。 

















188) SÉ ogo n 
- 
4 位 置 " 尺 二 向 
E 
x 600 Y -10 F1 
LEE index. 218 H 18 
M ES T ii : nr 7] 
L emus 
i; 文 世人 眉 播 有 限 责 性 公司 mu 
f 默认 -了 BD- 
图 5-130 图 5-131 


用 户 可 以 发 现在 更 改 了 母 版 中 的 图 片 后 ，index 页 面 中 的 母 版 实例 也 会 随 着 更 新 ， 但 是 位 置 坐标 
不 会 变 。 
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2. 固定 位 置 

固定 位 置 是 指 将 母 版 拖 放 到 原型 编辑 区 中 后 ， 母 版 实例 中 元 素 的 坐标 会 自动 继承 母 版 页 面 中 
元 素 的 坐标 ， 不 能 修改 。 和 普通 行为 一 样 ， 对 母 版 所 做 的 修改 也 会 立即 更 新 到 原型 设计 的 母 版 实 
例 中 。 

在 前 面 绘制 的 “ 母 版 logo” 上 单 击 鼠 标 右键 , 在 弹出 的 菜单 中 选择 “ 拖 放 行为 > 固定 位 置 ”命令 ， 
如 图 5-132 所 示 。 























x Su ma 
E BH logo 
添加 <A> 上 
移动 <M> » 
7 aeo 

重 命名 <R> 

重复 <C> » 

拖 放 行为 <B: ?| Y 任 这 位 置 <P> 

b> El 

从 页面 中 黎 险 .<R> L Beati 

使 用 情况 -<U> 
图 5-132 

即 可 将 “任意 位 置 ”的 母 版 转换 为 “固定 位 置 ”的 母 版 ， 如 图 5-133 所 示 。 
vox Ei wma vox Ed 2ma 
母 版 logo D 88 logo 
转换 前 转换 后 

图 5-133 


回 到 index 编辑 页 面 ， 将 “ 母 版 logo” 拖 昌 到 index 页 面 中 ， 如 图 5-134 所 示 。 


DC | 
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le 





金 景盛 
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限 责 性 公司 


æ] 











图 5-134 
用 户 会 发 现 index 页面 中 母 版 实例 的 位 置 和 “ 母 版 logo” 页 面 中 元 件 的 位 置 是 一 样 的 , 如 图 5-135 
所 示 。 
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母 版 logo 页 面 








图 5-135 





当 移动 index 页 面 中 的 母 版 实例 时 ， 用 户 会 发 现 并 不 能 移动 实例 的 位 置 ， 实 例 处 于 锁定 状态 ， 如 
图 5-136 所 示 。 当 单 击 “ 取 消 锁定 ”按钮 时 ， 会 弹出 提示 窗口 ， 如 图 5-137 所 示 。 





























[RD nza La. EE Alert | 
Add 让 
l=; a : - m 
i - *. » - * - - To unlock this master, right click and uncheck 

| "Lock to Location in Master" in the context menu. 
| 
| 

RRA | 
pee 

5-136 图 5-137 


当 对 “ 母 版 logo” 页 面 的 图 片 元 素 进 行 更 改 后 ， 如 图 5-138 Br. index 页 面 中 的 母 版 实例 也 
会 更 改 ， 但 是 位 置 坐标 还 是 会 继承 母 版 中 的 位 置 ， 如 图 5-139 所 示 。 
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3. 脱离 母 版 
继续 将 固定 位 置 行为 转换 为 脱离 母 版 行为 ， 如 图 5-140 所 示 。 母 版 的 内 容 如 图 5-141 所 示 。 
* ox ss amaje es nma 
D Sif oo S ogo 
转换 前 转换 后 








图 5-140 图 5-141 


回 到 index 编辑 页 面 ， 将 “ 母 版 logo” 拖 电 到 index 页 面 中 ， 如 图 5-142 所 示 。 用 户 会 发 现 
index 页 面 中 的 母 版 实例 可 以 随意 改变 位 置 坐标 和 大 小 ， 还 可 以 更 改 实例 内 容 ， 与 固定 位 置 行为 中 的 
母 版 实例 不 一 样 。 


RAS 
文化 便 揪 有 限 责 性 公司 











图 5-142 


双击 母 版 面板 中 的 “ 母 版 logo” 页 面 ， 进 入 母 版 logo 编辑 页 面 ， 在 编辑 页 面 内 更 改元 件 的 位 置 
和 内 容 ， 如 图 5-143 所 示 。 返 回 index 页 面 ， 用 户 会 看 到 index 页 面 中 的 母 版 实例 并 没有 随 着 母 版 
的 改变 而 改变 ， 如 图 5-144 所 示 。 





























[n EN -e z z š z 
. SRBE 
i 文化 责 性 公司 
1 R 
| | 
E 
图 5-143 图 5-144 


也 就 是 说 ， 脱 离 母 版 是 指 当 母 版 拖 入 原型 编辑 区 中 ， 母 版 实例 和 母 版 没有 任何 关联 性 ， 对 母 版 的 
任何 修改 都 不 影响 原型 编辑 中 母 版 实例 的 效果 。 
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5.5.3 子 母 版 








x x Su £2ma 
Axure RP 允许 母 版 中 再 套用 子 母 版 ， 这 样 使 得 母 版 的 层 4m reet 
次 更 加 丰富 ， 应 用 领域 更 加 广泛 。 在 母 版 下 即 可 创建 子 母 版 ， 7707 
如 图 5-145 所 示 。 子 母 版 的 绘制 方法 和 母 版 的 方法 相同 ， 不 再 a eee 
详细 讲解。 4m sao 
D 新 母 版 1 
图 5-145 


在 母 版 面板 中 不 仅 可 以 添加 母 版 页 面 ， 还 可 以 添加 母 版 组 页 面 ， 并 且 可 以 创建 子 母 版 。 母 版 对 象 
都 是 在 母 版 面板 中 进行 管理 。 

在 母 版 面板 中 新 建 的 母 版 和 母 版 组 都 是 “ 拖 放行 为 ”为 “任意 位 置 ”的 母 版 和 母 版 组 , 如 图 5-146 
所 示 。 

选中 其 中 的 母 版 页 面 ， 单 击 鼠 标 右 键 ， 弹 出 如 图 5-147 所 示 的 下 拉 菜 单 。 在 下 拉 菜 单 中 可 以 执 
行 对 母 版 的 删除 、 添 加 、 查 看 及 重复 等 操作 。 





添 h0<A> , 

移动 <M> 上 
JR meo 

重合 名 <R> 

重复 <C> » 


拖 放 行为 <B> 


添加 到 页 面 中 <A> 
从 页 面 中 移 除 .<R> 














5-147 
添加 : 添加 文件 夹 、 子 母 版 以 及 可 以 选择 位 置 添加 ， 如 图 5-148 左 图 所 示 。 


移动 : 可 以 移动 母 版 的 位 置 ， 还 可 以 将 母 版 降级 为 子 母 版 ， 将 子 母 版 升级 为 母 版 ， 如 图 5-148 
右 图 所 示 。 





5-146 
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f& bame A $ T€ Ctrl 
C ”下方 添加 <A> Ctrl Return - 
T a.c. * 升级 <O> Cte 








删除 : 将 不 需要 的 母 版 删除 。 
重 命名 : 为 母 版 重 命名 。 


图 5-148 


重复 : 选中 其 中 的 母 版 ， 选 择 “ 重 复 ” 命 令 ， 可 以 弹出 如 图 5-149 所 示 的 下 拉 菜 单 。 
e BH. 复制 选中 的 母 版 为 同一 级 别 。 
e DX: 分 支出 的 母 版 为 上 下 级 。 

拖 放行 为 : 将 母 版 转换 为 任意 位 置 行 为 、 固 定位 置 行为 及 脱离 母 版 行为 ， 如 图 5-150 所 示 。 
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添加 到 页 面 中 : 当 原 型 设计 中 添加 了 很 多 个 页 面 时 ， 用 户 可 以 选择 “添加 到 页 面 中 ”命令 ， 从 
弹出 的 “添加 母 版 到 页 面 中 ”对 话 框 中 选择 要 添加 的 页 面 及 添加 到 页 面 中 母 版 的 位 置 ， 如 图 5-151 
所 示 。 

从 页 面 中 移 除 : 与 添加 到 页 面 中 相反 , 在 所 有 添加 了 母 版 实例 的 页 面 中 , 可 以 选择 性 删除 母 版 实例 ， 
如 图 5-152 所 示 。 
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图 5-151 图 5-152 


使 用 情况 : 查询 母 版 面板 中 的 母 版 页 面 都 应 用 到 哪些 地 方 。 选 择 此 命令 ， 弹 出 “ 母 版 使 用 情况 ” 
对 话 框 ， 如 图 5-153 所 示 ， 说 明 母 版 在 index、page1、page2 页 面 中 都 有 和 母 版 实例 应 用 。 如 果 弹 


di sete 一 一 























图 5-153 图 5-154 


母 版 “使 用 情况 ”的 好 处 如 下 。 

e ”在 共享 项 目 中 ， 有 助 于 查看 母 版 面板 中 的 某 个 母 版 是 否 被 其 他 团队 成 员 创 建 的 原型 设计 图 所 
使 用 。 

e ”可 以 在 修改 之 前 对 所 有 页 面 进行 检测 ， 以 便 修改 母 版 对 所 有 页 面 的 影响 。 

e ”如 果 删 除 某 个 母 版 时 , 提示 无 法 删除 , 说 明 母 版 已 经 被 应 用 到 页 面 中 , 可 以 使 用 报告 查看 情况 。 
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动态 面板 可 以 根据 不 同 的 情况 显示 不 同 的 状态 。 通 过 改变 一 个 页 面 的 局 部 区 域 ， 避 免 因 复制 整个 
原型 设计 而 造成 元 余 ， 节 约 时 间 。 动 态 面板 还 能 用 于 创建 复杂 交互 ， 例 如 动画 、 视 觉 特 效 和 拖 外 等。 


5.6.1 创建 动态 面板 


经 过 第 4 章 实例 的 绘制 学 习 ， 用 户 对 动态 面板 应 该 已 经 很 熟悉 了 。 创 建 一 个 动态 面板 的 方法 就 是 

将 元 件 面板 中 的 动态 面板 拖 擅 到 编辑 区 中 ， 调 整 动态 面板 的 坐标 及 尺寸 后 ， 双 击 动态 面板 ， 进 入 “ 动 
态 面板 状态 管理 ”对 话 框 ， 添 加 状态 页 ， 在 状态 页 中 添加 相应 的 元 件 内 容 ， 如 图 5-155 所 示 。 

而 se 

动态 面板 名 称 eU] 





















































图 5-155 





5.6.2 ”转换 为 动态 面板 


下 面向 用 户 介绍 另 一 种 创建 动态 面板 的 方法 。 执行 “文件 > 打开 ”命令 , 打开 “素材 \ 第 5 章 \ 创 
建 动 态 面板 .rp” 文 件 ， 如 图 5-156 所 示 。 
选中 index 页 面 中 的 元 件 , 单 击 鼠 标 右键 , 弹出 如 图 5-157 所 示 的 菜单 , 选择 “转换 为 动态 面板 ” 


命令 ,效果 如 图 5-158 所 示 























M eec Ctrl+G 
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图 5-156 5-157 
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图 5-158 


用 户 会 看 到 index 页 面 变 成 带 有 一 层 浅 蓝 色 遮 重 的 单个 元 件 ， 从 视觉 上 可 以 区 分 动态 面板 和 其 他 
元 件 。 双 击 动态 面板 ， 弹 出 “动态 面板 状态 管理 ”对 话 框 ， 如 图 5-159 所 示 。 


























== 
图 5-159 


隐藏 元 件 显示 为 淡 黄色 遮 重 ;动态 面板 显示 为 浅 蓝 色 ; 页 面 中 的 母 版 实例 显示 为 淡 红 
色 ; 锁定 元 件 后 ， 元 件 的 边框 为 红色 。 用 户 可 以 执行 “视图 > RF” AS, POKI 
选 动态 面板 选项 ， 拖 昌 到 页 面 中 的 动态 面板 将 变 成 白色 ， 只 有 选中 的 情况 下 ， 才 知道 
它 的 存在 。 


用 户 可 以 采用 从 “元 件 ” 面 板 中 直接 拖 奥 动态 面板 元 件 到 页 面 中 的 方法 来 创建 动态 面板 。 这 种 方 
法 与 前 面 章节 所 讲 的 先 创建 内 容 ， 然 后 再 转换 为 动态 面板 的 方法 结果 相同 ， 本 质 上 没有 区 别 。 


5.7 


本 章 主要 向 用 户 介绍 了 页 面 快照 的 使 用 方法 、Axure RP 载 入 第 三 方 元 件 库 的 方法 、 母 版 面板 的 
使 用 方法 、 母 版 的 三 种 不 同 拖 放 行为 以 及 对 母 版 的 管理 。 最 后 向 用 户 介绍 了 动态 面板 的 使 用 。 熟 练 党 
握 母 版 、 动 态 面板 和 元 件 面板 的 使 用 ， 可 以 很 好 地 提高 工作 效率 。 








了 解 了 母 版 和 动态 面板 的 使 用 后 ， 接 下 来 完成 一 个 自 定义 元 件 的 创建 。 通 过 制作 实例 ， 复 习 前 面 
所 学 内 容 。 
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将 无 线 网 图 标 绘制 成 元 件 
SEHE > 学 视频 : 视频 \ 第 5 章 \ 将 无 线 网 图 标 绘制 成 元 件 .mp4 
源 文件 : 源 文件 \ 第 5 章 \ 将 无 线 网 图 标 绘制 成 元 件 .rp 


r3 





使 用 Axure RP 可 以 将 自己 需要 的 内 容 制作 成 


元 件 使 用 ， 经 过 前 面 的 学 习 ， 用 户 应 该 实际 操作 一 
下 ,绘制 出 无 线 图 标 形状 ， 并 作为 元 件 使 用 。 无 线 
图 标 主要 使 用 钢笔 工具 绘制 自 定义 形状 ， 钢 笔 工具 是 9. 





Axure RP 新 增 的 工具 ， 用 户 也 要 熟练 掌握 及 使 用 。 














01.4 新 建 一 个 项 目 文件 ， 并 且 创 建 一 个 元 件 库 ， 027 使 用 钢笔 工具 或 者 矩形 元 件 绘制 形状 ， 并 将 
命名 为 无 线 图 标 。 该 形状 填充 为 黑色 。 














ze = Q 
无 线 图 标 - 
4 无 线 图 标 
会 
9. Ka 
e 
使 用 相同 的 方法 绘制 其 他 形状 。 执行 “文件 > 保存 ”命令 将 文件 保存 ， 返 


回 项 目 文件 ， 刷 新 元 件 库 。 
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当 项 目 完成 后 , 单 击 工具 栏 中 的 “发 布 ”按钮 , 在 下 拉 菜 单 中 选择 “生成 HTML 文件 "命令 , 弹出“ 生 


成 HTML” 对 话 框 ， 如 图 6-1 所 示 。 
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设 定好 生成 项 目 所 在 的 目录 ， 选 择 要 在 哪个 浏览 器 中 查看 ，Axure RP 会 自动 识别 所 有 安装 好 的 
浏览 器 供用 户 选择 ， 一 般 会 选择 IE 浏览 器 。 

单 击 “确定 ”按钮 ， 在 浏览 器 中 可 以 看 到 生成 的 项 目 原型 。 对 于 IE 浏览 器 ， 每 次 在 浏览 器 中 打 
开 生成 的 Axure RP 项 目 时 ， 会 弹出 如 图 6-2 所 示 的 安全 提示 。 





Internet Explorer 已 限制 此 网 页 运行 脚本 或 ActiveX 控件 。 


图 6-2 


单 击 “ 人 允许 阻 止 的 内 容 ” 按 钮 即 可 。 但 是 在 下 一 次 查看 项 目 原型 时 还 会 出 现 此 提示 ， 用 户 可 以 在 
IE 浏览 器 的 “工具 ”菜单 中 选择 “Internet 选项 ”命令 , 弹出 “Internet 选项 ”对 话 框 , 如 图 6-3 所 示 。 

在 “高 级 ”选项 卡 中 勾 选 “允许 活动 内 容 在 我 的 计算 机 上 的 文件 中 运行 ” 复 选 框 ， 如 图 6-4 所 示 。 
重启 IE 浏览 器 ， 打 开 生 成 的 项 目 时 就 不 会 弹出 “安全 警告 ”了 。 
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不 管 是 在 预览 项 目 文件 时 ， 还 是 生成 项 目 时， 用 户 都 会 看 到 如 图 6-5 所 示 的 预览 效果 。 页 面 会 
分 成 两 部 分 ， 左 边 是 站 点 地 图 ， 右 边 是 效果 。 用 户 可 以 对 其 进行 设置 ， 执 行 “ 发 布 > 预览 设置 ”命令 
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在 “预览 选项 ”对 话 框 中 可 以 设置 预览 时 浏览 器 的 界面 分 布 。 
1. 浏览 器 

默认 浏览 器 :在 计算 机 设置 的 默认 浏览 器 中 打开 。 

不 打开 : 预览 时 不 会 在 浏览 器 中 打开 查看 效果 。 

IE 浏览 器 ; 在 指定 的 IE 浏览 器 中 打开 。 


2. 站 点 地 图 
生成 并 显示 : 在 浏览 器 中 可 以 看 到 页 面 管理 面板 。 如 图 6-7 所 示 为 Axure RP 工作 界面 中 的 页 
面 管理 面板 ， 如 图 6-8 所 示 为 在 浏览 器 中 生成 的 站 点 地 图 。 两 者 名 称 不 同 ， 但 是 内 容 相同 。 
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图 6-7 图 6-8 


生成 并 隐藏 : 在 预览 项 目 文件 时 可 以 看 到 站 点 地 图 ， 但 是 处 于 隐藏 状态 ， 如 图 6-9 所 示 。 单 击 
左上 角 的 小 和 矩形， 即 可 查看 ， 如 图 6-10 所 示 。 


MOREWORK? : meum |n Cs en. MOREWORNK? "5:5. | 


an Weis T [Oe i ue: aa COEL 








what is happening in other companies 258A what is happening in other companies. | wm 























无 站 点 了 地 图 : 在 预览 项 目 文件 时 没有 站 点 地 图 ， 也 就 是 没有 页 面 管理 面板 显示 ， 如 图 6-11 
所 示 。 

用 户 不 仅 可 以 设置 预览 时 的 默认 界面 ， 而 且 也 可 以 设置 生成 原型 时 的 默认 界面 ， 如 图 6-12 所 示 。 
详细 方法 与 前 面 介 绍 预览 时 的 方法 相同 ， 这 里 不 再 详细 讲解 。 











27 Q 


"OR: ? 


BA [ssaa | | anan J 








what is happening in other companies 








SKATAN! è ARMERET STATNI! x 
ATATARARWSESATATA Hatahsae Agere ATARNATA TATATAEI 
| oo 
i pens Ei Eruca 

| 
inks Eun 


ki 
ane STER 
ptr 
RENEM RERE: 


ARAT: de XnAR: RA Ld 
dra: TEMAER 作者 : TANA 


























6-12 


在 输出 项 目 文件 之 前 ， 首 先 要 了 解 Axure RP 的 原型 、Word 文档 和 生成 器 的 概念 。 
Q6 


6.3.1 原型 


原型 是 指 Axure RP 输出 的 HTML 文件 。 单 击 工具 栏 中 的 “发 布 ”按钮 ， 在 下 拉 菜 单 中 选择 “ 生 
成 HTML 文件 ”命令 ,如 图 6-13 所 示 。 弹 出 “生成 HTML” 对 话 框 ， 如 图 6-14 所 示 。 


























me z 
- = 
== —— 
= pA e e] 
is m X 忆 z 
s. se maea Bm | lend 
n ms Fs za 
预览 选项 .<O> Cul+F5 me 
”发 布 到 AxShare..<A> F6 
登录 你 的 Axure 账 号 Cr+F12 
" z "m 
在 HTML 文 件 中 重新 生成 当前 页 面 <R>  Ctrl+F8 suom dier 
生成 Word 文 档 ..<G> Fo nem Een 
更 多 生成 器 和 配置 文件 <M > mu 
-— - 
mes 图 6-14 


在 “生成 HTML ”对 话 框 中 可 以 配置 默认 HTML 生成 器 的 选项 。 可 以 创建 多 个 HTML 生成 器 ， 
在 大 型 项 目 中 可 以 将 原型 切 分 成 多 个 部 分 输出 , 以 加 快 生成 的 速度 .生成 之 后 可 以 在 Web 浏览 器 中 查看 。 


6.3.2 生成 Word 文档 


将 Axure RP 项 目 生 成 Word 文档 ， 单 击 工具 栏 中 的 “发 布 ” 按 钮 ， 在 下 拉 菜 单 中 选择 “生成 
Word 文 档 ” 命 令 , 如 图 6-15 所 示 。 弹 出 Generate Word Documentation( 生成 Word 文档 ) 对 话 框 ， 
如 图 6-16 所 示 。 
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在 HTML 文 件 中 重新 生成 当前 页 夯 <R>  Ctrl+F8 Ee UMS 
F9 | 
E xa j| 




















图 6-16 


f£ Generate Word Documentation( 生成 Word 文档 ) 对 话 框 中 可 以 配置 默认 Word 文档 生成 
器 的 选项 。 与 生成 HTML 文档 一 样 ， 也 可 以 创建 多 个 Word 文档 生成 器 。 根 据 不 同 的 内 容 ， 将 大 项 
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目 规 划 为 多 个 小 的 Word 文档 。 


6.3.3 ”生成 器 和 配置 文件 


Axure RP ft T HTML. Word. CSV 报告 和 打印 4 种 类 型 的 生成 器 。 单 击 工具 栏 中 的 “发 布 ” 
按钮 ， 在 下 拉 菜 单 中 选择 “更 多 生成 器 和 配置 文件 ”命令 ， 如 图 6-17 所 示 。 弹 出 “管理 配置 文件 ” 
对 话 框 ， 如 图 6-18 所 示 。 



















3 m T 
ca mee mE, 
n ss FS 
| 观光 还 项 …<O> Cul+F5 | Html Prototype 1 (default) HTML 
| Si ”发 布 到 AxShare..<A> F6 | Word 2007 Spec 1 (default) Wordz doo) 
e^ CsvReport 1 CSV 报 告 
s SUIDA Print 4 (default) 打印 
各 生成 HTML 文 件 ..<H> Fa 
在 HTML 文 件 中 重新 生成 当前 页 面 <R> Ctrl+F8 
国生 成 Word 文 档 …<G> Fo 
Bets EB M. 
^ E 
图 6-17 图 6-18 


在 “管理 配置 文件 ”对 话 框 中 罗列 出 了 所 有 可 用 的 生成 器 ， 并 且 可 以 对 生成 器 进行 操作 。 
创建 新 的 生成 器 : 单 击 “ 添 加 ”按钮 , 弹出 下 拉 选 项 , 如 图 6-19 所 示 。 可 以 选择 创建 新 的 生成 器 。 


Wordsztä( dooi) 
HTML 

cova 

nm 








图 6-19 
编辑 生成 器 :双击 要 修改 的 生成 器 或 者 选择 要 编辑 的 生成 器 ， 单 者 贺 ( 编辑 与 生成 ) 按钮 ， 即 可 
打开 编辑 对 话 框 ， 下 节 向 用 户 详细 讲解 。 
重复 生成 器 : 单 击 国 | ( 重复 ) 按钮 ， 可 以 复制 相同 的 生成 器 ， 如 图 6-20 所 示 。 
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清除 生成 器 : 选中 需要 删除 的 生成 器 ， 单 击 殉 | ( 清除 ) 按钮 ， 即 可 将 其 删除 。 

创建 多 个 生成 器 的 好 处 如 下 。 

e ”可 以 生成 一 个 带 有 说 明 的 HTML 原型 和 一 个 不 带 说 明 的 HTML. 原型 。 在 与 利益 相关 者 进行 
会 议 时 ， 可 以 同时 使 用 两 个 原型 ， 一 个 比较 整齐 清晰 ， 另 一 个 是 对 原型 界面 上 所 有 元 素 的 说 
明 描 述 ， 方 便 设计 师 对 利益 相关 者 讲解 。 

e ”在 大 项 目 中 生成 HTML 原型 时 ， 可 以 只 生成 当前 工作 的 内 容 页 面 ， 从 而 提高 原型 生成 的 
速度 。 

® ”在 大 项 目 中 可 以 将 Word 文档 切 分 成 多 个 部 分 输出 ， 每 个 部 分 都 对 应 自己 的 应 用 模块 。 这 样 
对 于 不 同 开发 团队 或 利益 相关 者 负责 不 同 的 工作 很 合适 。 各 个 设计 师 只 要 对 自己 的 相关 文档 
部 分 讲解 。 


HTML 生成 器 和 Word 生成 器 在 6.3 节 中 已 经 向 用 户 简单 介绍 过 ， 下 面 详细 向 用 户 讲解 HTML 
生成 器 和 Word 生成 器 。 


6.4.1 HTML 生成 器 


双击 “管理 配置 文件 ”对 话 框 中 的 “HTML 生成 器 ”选项 ， 如 图 6-21 所 示 。 弹 出 “生成 
HTML ”对 话 框 ， 如 图 6-22 所 示 。 






































am -GD D 
Word 2007 Spec 1 (default Words doo) 
Csv Report 1 CSV 报 告 
Print 1 (default) 打印 
C J| xj 
6-21 图 6-22 


常规 ; 设置 存放 HTML 文件 的 位 置 , 单 击 如 图 6-23 所 示 的 按钮 , 可 以 弹出 “浏览 文件 夹 " 对 话 框 ， 
可 以 设置 文件 保存 的 位 置 ， 如 图 6-24 所 示 。 

页 面 : 选择 “页 面 " 选项, 可 以 选择 单独 的 页 面 , 默认 情况 下 是 生成 所 有 的 页 面 , 如 图 6-25 所 示 。 
取消 义 选 “生成 所 有 页 面 ”选项 ， 可 以 任意 选择 要 生成 的 页 面 ， 如 图 6-26 所 示 。 

在 项 目 文件 中 ， 当 页 面 过 多 时 ， 用 户 还 可 通过 全 部 选中 、 全 部 取消 、 选 中 全 部 子 页 面 及 取消 全 部 
子 页 面 4 个 按钮 进行 操作 ， 如 图 6-27 所 示 。 
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页 面 说 明 : Axure RP 提供 了 一 个 简单 的 页 面 说 明 字段 名 称 Default， 可 以 对 页 面 说 明 重 命名 ， 
也 可 以 添加 其 他 的 页 面 说 明 ， 让 HTML 文档 的 页 面 说 明 更 具有 结构 化 ， 如 图 6-28 所 示 。 

THRE: 在 页 面 编辑 区 中 的 每 个 元 件 都 有 它 存在 的 理由 ， 开 发 者 会 将 每 个 元 件 转化 为 代码 ， 如 
6-29 所 示 。 
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图 6-28 图 6-29 


ZE. 指定 用 例 交 互 行为 ， 如 图 6-30 所 示 。 
标志 : 导入 并 设置 标题 ， 如 图 6-31 所 示 。 
AB 4EREHTML« Html Prototype 1> La. 
E 
m esas 
Prec dcs NORAN 
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6-30 6-31 
Web 字体 : f£ Axure RP 中 默认 字体 是 Arial 字体 ， 它 可 以 通过 元 件 样式 编辑 器 修改 元 件 的 默 
认 字 体 ， 通 过 这 种 方式 ， 可 以 查看 项 目 文件 中 哪里 应 用 了 Web 字体 ， 如 图 6-32 所 示 。 
字体 映射 : 创建 一 种 新 的 字体 映射 关系 ， 如 图 6-33 所 示 。 
移动 设备 : 当 输 出 原型 应 用 到 移动 设备 时 ， 可 以 设置 适 配 移动 设备 的 特殊 原型 ， 如 图 6-34 所 示 。 
高 级 : 可 以 设置 项 目 文件 输出 时 字体 的 大 小 及 页 面 的 草图 效果 ， 如 图 6-35 所 示 。 
讨论 : 可 以 让 访问 者 在 浏览 时 创建 说 明和 恢复 其 他 访问 者 的 说 明 ， 用 户 需 要 有 自己 的 1D 对 说 明 
进行 管理 和 保护 ， 如 图 6-36 所 示 。 
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图 6-36 


对 于 响应 式 的 Web 项 目 文件 ，HTML 原型 是 最 好 的 展示 方式 。 


6.4.2 Word 生成 器 


双击 “管理 配置 文件 ”对 话 框 中 的 “Word 生成 器 ”选项 ， 如 图 6-37 所 示 。 弹 出 Generate 
Word Documentation( 生成 Word 文档 ) 对 话 框 中 ， 如 图 6-38 所 示 。 
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6-37 图 6-38 


常规 ;设置 项 目 文件 保存 的 位 置 ， 以 及 调整 Web 浏览 时 的 页 面 效 果 。 
页 面 : 和 HTML 生成 器 中 的 页 面 说 明 一 样 ， 可 以 使 页 面 更 具有 结构 化 ， 如 图 6-39 所 示 。 
号 版 : 选择 需要 出 现在 Word 文档 中 的 母 版 及 形式 ， 如 图 6-40 Firm. 





| - =a 
6-39 6-40 

页 面 属 性 : 选择 生成 时 需要 包含 的 页 面 ， 它 提供 了 多 种 丰富 的 选项 和 配置 页 面 信息 ， 这 些 配 置 可 

以 应 用 于 页 面 管理 面板 中 所 有 的 页 面 ， 如 图 6-41 所 示 。 

FEAR: Axure RP 生成 Word 文档 时 ， 有 一 项 特别 节省 时 间 的 功能 是 自动 生成 所 有 页 面 的 屏 
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幕 快照 ， 也 就 是 说 生成 文档 时 ， 所 有 页 面 的 屏幕 快照 都 会 自动 更 新 ， 还 可 以 同时 创建 说 明 编号 脚注 ， 
如 图 6-42 所 示 。 
























































图 6-41 图 6-42 
元 |# 夫 :提供 了 多 种 选项 配置 功能 ， 可 已 对 Word 文档 中 包含 的 元 件 说 明 信 息 进行 管理 ， 如 图 6-43 所 示 。 
布局 : 提供 了 对 Word 文档 页 面 布局 的 可 选择 性 ， 如 图 6-44 所 示 。 

Word 模板 ，Axure RP 会 使 用 一 个 Word 模板 ， 然 后 基于 前 面 各 个 选项 的 设置 ， 将 所 有 内 容 组 

织 起 来 。 在 Word 模板 中 可 以 导入 模板 ， 还 可 以 创建 模板 ， 如 图 6-45 所 示 。 
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6-43 6-44 6-45 
Axure RP 是 现今 最 有 效 的 原型 设计 工具 之 一 。 在 项 目 文件 输出 时 ，Word 文档 是 最 重要 的 ， 同 
时 也 是 最 容易 理解 的 输出 形式 。 


下 面向 用 户 详细 讲解 CSV 报告 生成 器 和 打印 生成 器 的 相关 知识 。 


6.5.1 CSV 报告 生成 器 


CSV 是 一 种 通用 的 、 相 对 简单 的 文件 格式 ， 被 用 户 、 商 业 和 科学 广泛 应 用 。 最 广泛 的 应 用 是 在 
程序 之 间 转 移 表格 数据 ， 而 这 些 程序 本 身 是 在 不 兼容 的 格式 上 进行 操作 的 。 因 为 大 量程 序 都 支持 某 种 
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CSV 变 体 ， 至 少 是 作为 一 种 可 选择 的 输入 / 输出 格式 。 


项 目 文件 以 纯 文本 形式 存储 表格 数据 ( 数字 和 文本 )。 文 本 意味 着 该 文件 是 一 个 字符 序列 ， 不 含 
必须 像 二 进 制 数 字 那 样 被 解读 的 数据 。CSV 文件 由 任意 数目 的 记录 组 成 ， 记 录 间 以 某 种 换行 符 分 隔 ; 
每 条 记录 由 字段 组 成 ， 字 段 间 的 分 隔 符 是 其 他 字符 或 字符 串 ， 最 常见 的 是 喜 号 或 制 表 符 。 通 常 ， 所 有 


记录 都 有 完全 相同 的 字段 序列 。 


双击 “管理 配置 文件 ”对 话 框 中 的 CsvReport 选项 ， 如 图 6-46 所 示 。 弹 出 Configure CSV 


Reports 对 话 框 ， 如 图 6-47 所 示 。 


Wy x c 
ER 
(Html Prototype 1 (default) 
Word 2007 Spec 1 (defaut) 








图 6-46 — 








图 6-47 


常规 ,设置 项 目 文件 保存 的 位 置 ， 以 及 调整 Web 浏览 时 的 页 面 效果 。 
页 面 ， 和 前 面 介绍 的 生成 器 中 的 页 面 说 明 一 样 ， 可 以 页 面 更 具有 结构 化 ， 如 图 6-48 所 示 。 
母 版 ， 可 以 选择 需要 在 CSV 报告 中 出 现 母 版 ， 如 图 6-49 所 示 。 
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图 6-48 


图 6-49 


页 面 说 明 : 选择 需要 在 CSV 报告 中 出 现 的 页 面 说 明 ， 如 图 6-50 所 示 。 
元 件 说 明 ， 选择 需要 在 CSV 报告 中 出 现 的 元 件 说 明 ， 如 图 6-51 所 示 。 
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EN ei ia | Ta = 
图 6-50 6-51 
CSV 文件 格式 的 通用 标准 并 不 存在 ， 但 是 在 RFC 4180 中 有 基础 性 的 描述 。 使 用 的 字符 编码 同 


样 没有 被 指定 。 
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6.5.2 ”打印 生成 器 


打印 生成 器 是 Axure RP 中 新 增 的 生成 器 ， 是 指 如 果 需 要 定期 打印 不 同 的 页 面 或 母 版 ， 可 以 创建 
不 同 的 打印 配置 项 ， 这 样 就 不 需要 每 次 都 重新 去 配置 打印 属性 。 

在 打印 时 ， 可 以 配置 想 打印 的 页 面 比 例 ， 无 论 是 几 页 内 容 还 是 文件 的 一 整 节 ， 打 印 模板 就 变 得 非 
常 简单 。 如 果 正 在 从 项 目 文件 中 打印 多 个 页 面 ， 不 必 重 复 调整 打印 设置 ， 可 以 为 每 个 需要 打印 的 页 面 


创建 单独 的 打印 配置 。 
双击 “管理 配置 文件 ”对 话 框 中 的 Print 选 项 , 如 图 6-52 所 示 。 弹出 Print 对 话 框 , 如 图 6-53 所 示 。 
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图 6-52 图 6-53 
Scaling( 缩放 比例 )， 可 以 用 来 设置 缩放 图 标 为 纸张 大 小 、 全 尺寸 、 缩 放 、 按 宽度 适 配 及 按 页 面 
适 配 几 种 规格 。 
页 面 : 选 定 需要 打印 的 页 面 进行 打印 ， 如 图 6-54 所 示 。 
母 版 : 选 定 需要 打印 的 母 版 进行 打印 ， 如 图 6-55 所 示 。 
[| Emo ëO 
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本 章 向 用 户 讲解 了 Axure RP 的 4 种 生成 器 ， 可 通过 生成 4 种 不 同 格式 的 原型 设计 提供 给 客户 
查看 。HTML 生成 器 是 常用 的 生成 器 ; Word 生成 器 是 人 们 最 容易 理解 和 接受 的 ; CSV 报告 生成 器 
是 通用 的 、 相 对 简单 的 文件 格式 ; 而 打印 生成 器 可 以 设置 打印 的 尺寸 和 格式 ， 除 此 之 外 ， 还 可 以 创建 
单独 的 打印 配置 。 
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制作 完成 的 原型 文件 ， 只 有 选择 正确 的 输出 方式 ， 才 算 真 正 完成 了 制作 ， 否 则 一 切 都 是 徒劳 。 下 
面 来 制作 一 个 数字 增加 的 页 面 效 果 ， 体 会 使 用 Axure RP 的 强大 功能 。 









ET 
实战 ^ 教学 视频 : 视频 \ 第 6 章 \ 数 字 增 减 效果 .mp4 
JEU. 源 文件 \ 第 6 章 \ 数 字 增 减 效果 .rp 





在 Axure RP 中 常常 会 用 到 数字 增 减 效果 ， 本 | 3 
实例 使 用 提交 按钮 及 文本 框 按钮 ,重点 是 在 条 件 设立 ， 2 
只 要 将 条 件 设立 正确 ， 赋 值 正 确 ， 数 字 的 加 减 效果 是 


很 容易 实现 的 。 
S ) «| 











01-4 新 建 一 个 项 目 文件 ， 在 页 面 中 拖 入 两 个 提 为 减 号 元 件 添加 鼠标 单 击 时 事件 ， 在 用 例 编 
交 按 钮 元 件 及 一 个 文本 框 元 件 ， 并 将 元 件 重 命名 。 ”” 辑 对 话 框 中 添加 并 配置 动作 。 
































-— | -| 于 
8 s] 
Eee i: A 
(mm m 
为 加 号 元 件 添加 鼠标 单 击 时 事件 ， 在 “用 执行 “文件 > 保存 ”命令 ,将 文件 保存 ,执行 “ 预 
例 编辑 ”对 话 框 中 添加 并 配置 动作 。 览 ”命令 ， 查 看 效果 。 
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本 章 知 识 点 
Tortoise SVN 


团队 项 目 是 多 人 一 同 开发 具有 一 定 规模 和 复杂 性 的 项 目 文件 ， v VisualSVN Server 服务 端 
每 个 人 都 会 分 到 一 个 或 多 个 项 目 模块 ， 每 个 模块 都 有 联系 。 v 创建 团队 项 目 
团队 项 目 时 间 短 、 预 算 有 限 , 每 个 人 都 会 在 自己 的 模块 中 工作 ， v^ 获取 团队 项 目 
导致 整个 项 目 不 能 同步 ， 合 作 存在 很 大 的 挑战 ， 这 是 项 目 文档 的 本 /编辑 团队 项 目 
任何 包含 多 个 同时 异步 进行 的 项 目 本 身 需要 具备 复杂 的 管 





理 过 程 。 本 章 向 用 户 介绍 Axure RP 项 目 合作 的 功能 及 方法 ， 如 何 
保持 原型 同步 。 


期 Visuals VN Server 3.4.2 Setup 


Welcome to the VisualSVN Server 3.4.2 
Setup Wizard 


The Setup Wizard wil install VisualSVN Server 3.4.2 on your. 
computer. Chck Next to continue or Cancel to exit the Setup — | 
wizard. 


TortoiseSVN 


























在 创建 团队 项 目 时 ， 要 做 好 准备 工作 ， 首 先 需 要 有 存储 项 目的 空间 位 置 ， 共 享 的 项 目 位 置 可 以 创 
建 在 以 下 位 置 。 

e ”共享 的 网 络 硬盘 。 

e ”公司 共享 的 SVN 服务 器 。 

e SVN 托管 服务 器 ，Beanstalk 或 者 Unfuddle。 

e 不管 使 用 哪 种 方式 ， 都 会 有 个 位 置 的 地 址 ， 有 了 这 个 地 址 就 可 以 创建 团队 项 目 了 。 





























7.1.1 Tortoise SVN 


Tortoise SVN 是 Subversion 版 本 控制 系统 的 一 个 免费 开源 客户 端 ， 可 以 超越 时 间 的 管理 文件 
和 目录 。 文 件 保存 在 中 央 版 本 库 ， 除 了 能 记 住 对 文件 和 目录 的 每 次 修改 以 外 ， 版 本 库 非 常 像 普 通 的 文 
肛 务 器 。SVN 为 程序 开发 团队 提供 常用 的 代码 管理 ， 下 面 介 绍 Tortoise SVN 的 安装 。 
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实例 n Tortoise SVN 客户 端 
27 Hn. 4 $8 7 € E Tortoise SVN 客户 端 .mp4 RIH: 无 
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安装 Tortoise SVN 是 将 团队 项 
目 共享 的 前 提 。 只 有 将 服务 器 搭建 完 : 
成 ， 才 能 向 团队 所 有 成 员 开 通 共享 功 ME y 
能 ,团队 成 员 才能 查看 获取 项 目 文件 。 
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制作 步骤 : 


m 在 网 上 下 载 Tortoise SVN 的 安装 包 ， 解 压 安装 包 ， 如 图 7-1 所 示 。 
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& 7-1 

双击 Tortoise SVN 的 应 用 程序 ， 如 图 7-2 所 示 。 弹 出 安装 程序 对 话 框 ， 单 击 Next 按钮 继 
卖 安装 ， 如 图 7-3 所 示 。 

icis 弹出 “许可 协议 ”对 话 框 ， 如 图 7-4 所 示 。 弹 出 “安装 位 置 ”对 话 框 ， 默认 的 位 置 是 C 盘 ， 

单 击 Next 按钮 继续 安装 ， 如 图 7-5 所 示 。 

0 弹出 “提示 "对 话 框 , 提示 是 否 安装 , 如 图 7-6 所 示 。 单 击 Install 按 钮 , 显示 安装 进度 , 如 

所 示 。 
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Welcome to the TortoiseSVN 
1.9.1.26747 (64 bit) Setup 
Wizard 





2 subversion 
Bares 
ana 
Em 
Bx 
zz 
dze 


The Setup Wizard wil install TortoiseSVN 1.9. 1.26747 (64 
bit) on your computer. Click Next to continue or Cancel to. 
exit the Setup Wizard. 


emm 
camem o 
局 Sorware x 
a MEDA EY 
oun Fy 


TortoiseSVN 


Ame 
M NS-2otsblouygs 
M rcanonuue 
A scansositwe. 
me TotcieSiN 1810261224 0-1. EE zie to 
Eun 


Windows Intalor it 





[Copyright (C) 2003-2015 - Stefan Küng 

[TortoiseSVN is free. You dont have to pay for it, and you can use it any way you want. 
Itis developed as an Open Source project under the GNU General Public License 
(GPL) That means you have full access to the source code of Iis program. You can = 
find it on our website athtp Worolseswmnet 

[Should you wish to modit or redistribute tnis program. or any part oft you should 
read the tuli terms and conditions set out in the license agreement before doing so. uem n 

|^ copy of he license is avallable on our website. 298 on your 

It you simply wish to instali and use this software, you need only be aware of the Mie LOREM 

disclaimer conditions in he license, which are set out below. | méfentresronse 27/30. 

[NO WARRANTY 

M———————— locaton: C:\Program Fies\TortoisesvN\ | 








Rest) (nume ] ( «tm Jj met» ) [cance J 





Installing TortoiseSVN 1.9.1.26747 (64 bit) 
The Setup Wizard is ready to begin the Custom instaliston. 


Please wait whie the Setup Wizard installs TortoiseSVN 1.9. 1.26747 (64 bi). 
Clik Install to begin the installation. If you want to review or change any of your. prin enn "oe 
instalation settings, cick Back. Click Cancel to exit the wizard. 


Status: Updatng component registration 
——————— 


Thanks for using TortoiseSVN. You can show your apprecation and support future 
development by donating! 
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05-4 单 击 Finish 按 钮 ,完成 Tortoise SVN 的 安装 ,如 图 7-8 所 示 。 在 桌面 的 空白 处 单 击 鼠 标 右键 ， 
弹出 下 拉 菜 单 ， 即 可 看 到 SVN 服务 器 ， 如 图 7-9 所 示 。 
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Completing the TortoiseSVN 
1.9.1.26747 (64 bit) Setup 
Wizard 


Chck the Finish button to ext the Setup Wizard. 


E] Show Changebg 


Thanks for ushg TortoseSiN. You can show your 
appreaaton and support future developmen: by 
donating! 


TortoiseSVN 





图 7-8 





在 下 载 的 压缩 包 中 还 有 汉化 包 ， 双 击 汉化 包 文件 ， 


7-11 所 示 。 
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如 图 7-10 所 示 。 将 汉化 包 进行 安装 ， 如 











Jj “TortoiseSVN Chinese, simplified" So Le] in 
Z Welcome to the "TortoiseSVN Chinese, 
simplified" Setup Wizard 
» as 
uv w 
oT Tre Senp Wizard wi instal “TortooeSW Chinese, smplfed' 
0s on your computer. Cick Next to continue or Cancel to exit 
& the Setup Wizard, 

LJ S 

e. ^ 

á 

St 
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m. 






































Ti 


BÉ Next 按钮 ， 显 示 安 装 进度 ， 如 图 7-12 所 示 。 单 击 Finish 按钮 ， 完 成 汉化 包 的 安装 ， 


如 图 7-13 所 示 。 





3 TortoiseSVN Chinese simpliied Setup 777 a) 




















JB TortoiseSVN Chinese smpifed'Seup ele | 
Installing “TortoiseSVN Chinese, simplified" b z Completed the "TortoiseSVN Chinese, 
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EJ WEE ah atem 
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在 桌面 的 空白 处 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 TortoiseSVN>Setting 命令 ， 如 图 7-14 
所 示 。 弹出 Settings 对 话 框 , 在 该 对 话 框 中 可 以 选择 语言 , 单 击 “ 应 用 ”按钮 , 即 可 完成 汉化 , 如 图 7-15 
所 示 。 
































, 
, 
Culsz z 
E NVIDIA sem HE Creste Library 
iE. SVN Checkout.. m 
4M TortoiseSVN |f, Repo-rowser a i €— " 
| obal iguere pattern: ol ll dibeg eee 
Pur E Wi Eon Y Merge Tool Set file dites to the "Last commit tine" 
seo >| (P Create repository here 4j Saved Data POE EE 
"m mESWE(C Al import.. 4 [B Log Caching 
Cached Repositories ~ 
s AIRG Settings - 
LES a Help ^ 
国 About 





7.1.2 VisualSVN Server 服务 端 


VisualSVN Server 是 一 个 集成 的 SVN 服务 端 工具 , 并 且 包 含 mmc 管理 工具 ， 是 一 款 SVN BR 
务 端 不 可 多 得 的 好 工具 。 


mn " " 
实例 【visualsVN Server 服务 器 的 安装 
28 教学 视频 : 视频 \ 第 7 章 \VisualSVN Server RARR mp4 PXH: Æ 





实例 分 析 : 

前 面 安 装 了 Tortoise SVN 客户 
端 ， 现 在 继续 安装 VisualSVN Server 
服务 端 ， 只 有 将 两 者 进行 搭建 ， 才 能 
实现 共享 。 

















制作 步骤 : 


在 网 上 下 载 VisualSVN Server 的 安装 包 ， 解 压 安装 包 ， 如 图 7-16 所 示 。 双 击 安装 程序 进 
行 安装 ， 如 图 7-17 所 示 。 
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JË VisualSVN Server 3.4.2 Setup. = 器 
@ create Cloud Xt Welcome to the VisualSVN Server 3.4.2 
Setup Wizard 

LL 

国 tern 

Heme The Setup Wizard wil install VisualSVN Server 3.4.2 on your 
Bus computer. Click Next to continue or Cancel to exit the Setup. 
Ear Wizard. 

PESI t 

aasre 

Lh This product dudes the folowing components: 

Apache HTTP Server 2.2.31 

de Apache Subversion 1.9.2 

n 

ca SOFTWARE (09 

cs MEDIA 加 

viri VISUALSVNSERVER 
ELA 

二 maomstltaogp 

(8 rcainisonanir 

a reati wn z 

WE * Cr) (came 
vule Wu p 


























BI 7-16 图 7-17 


单 击 Next 按 钮 , 弹出 “许可 协议 ”对 话 框 , 如 图 7-18 所 示 。 单 击 Next 8H, 勾 选 其 中 的 选项 
如 图 7-19 所 示 。 

















JB VisualsVN Server 342 Setup. 一 一 | [3 VisuelSVN Server 3.4.2 Setup 
End-user License Agreement Select Components 
Hease read the folowng icense agreement carefuly Pease select components you wouid Ike to install, 
- E You can ether choose to perform the fl instalation of VisuaSV Server or only install 
[License Agreement for VisualSVN Server “ e coreqpondng wan tation tonk. Place voloct conparents you want to ba 
staled on this computer, 
IMPORTANT! READ CAREFULLY: THIS IS A LEGAL AGREEMENT. BY © VsualSIN Server and Adrinisratin Tools 
DOWNLOADING, INSTALLING, COPYING, SAVING ON YOUR Instal server ode compenenis and al the administration tools, 
COMPUTER, OR OTHERWISE USING THIS SOFTWARE, YOU (LICENSEE. DEUM 
|AS DEFINED BELOW) ARE BECOMING A PARTY TO THIS AGREEMENT Ai 
|AND YOU ARE CONSENTINGTOBEBOUND BY ALL THE TERMS AND BE iru iv olieriel rici te sd sibverdor condo oct 
CONDITIONS OF THIS AGREEMENT. IF YOU DO NOT AGREE TO THE Cogita Dea umm 
(TERMS AND CONDITIONS CF THIS AGREEMENT, YOU SHOULD NOT 
DOWNLOAD. INSTALL AND USE TEE SOFTWARE. (| Add Subversion commanc ine tools to fe PATH envronnent variable 


= Update the PATH environment variable to enabe direct access to the Subversion 
commend ine tools (such es svn.exe and Synedmin,exe) from the Commend Lhe. 


[V] accept the terms in he Lcense Ageenent 




















E Ceo | O Coed 








图 7-18 图 7-19 


继续 单 击 Next 按钮 ， 弹 出 VisualSVN Server Editions 对 话 框 ， 如 图 7-20 所 示 。 单 击 
Standard Edition 按钮 ， 弹 出 “安装 位 置 ”对 话 框 ， — B, WA 7-21 所 示 。 








M VisualSVN Server 342 Setup. e mtm 
VisualsVi serverEdmons 1nttal server Configuraton 
Pease select which editon of Vals Sever you's ike to natal Pease adust he defaut contguraton seing it necestary. 


There are two editions of VisualSYN Server avalable anc depending on your needs you 
tan choose which ene suits you best. 





locaton: [Eprom Fies Visi Serveri 





is great for ndividuals and smal groups. Truy Fepostories: :Reposiones\ 
fiee of charge and pernitted for conmerdal use. 


Sevepot 和 ~ [F] use secure comecton httpss/) 


Enterprise Editon 


The best option for SMB and enterprises. Provides addtional features such as 
Active Drectary Sngle Sign-On and Remete Serve: Adrinistratien. 




















7-20 B 7-21 


04-4 调整 好 VisualSVN Server 的 安装 位 置 ， 单 击 Next 按钮 ， 弹 出 Ready to Install 对 话 框 ， 
如 图 7-22 所 示 。 继 续 单 击 Next 按钮 ， 弹 出 “安装 进度 ”对 话 框 ， 如 图 7-23 所 示 。 
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[Eme] 


JE) VisuelSVN Server 34.2 Setup. 





AE) VisualSVN Server 34.2 Setup 





|| Ready to Install 

The Setup Wizard is ready to begin 

Cidk Install to begin the instalation. If you want to review or change any of your. 
installation settings, cick Back. Clck Cancel to exit the wizard. 











Installing VisualSVN Server 3.4.2 


Please wait while the Setup Wizard installs VisualSVN Server 3.4.2. 


Status: Configuring default repository security settings. 























| mmm = X | 
图 7-22 图 7-23 
完成 后 弹出 “安装 完成 ”对 话 框 ， 在 该 对 话 框 中 勾 选 选项 ， 如 图 7-24 所 示 。 单 击 Finish 按 


钮 ， 完 成 安装 ， 弹 出 VisualSVN Server 对 话 框 ， 如 图 7-25 所 示 。 


ces i 


JË) VisualSVN Server 3,4,2 Setup. 





Completing the VisualSVN Server 3.4.2 
Setup Wizard 


Cik the Firish button to exit he Setup Wizard. 


LE Subscribe for release notifications vis email or RSS 
[Z Start VisualSYN Server Manager 


VISUALSVNSERVER 



































图 7-24 


7-25 


7.1.3 ”使 用 VisualSVN Server 建立 版 本 库 


搭建 VisualSVN Server 服务 端 和 TortoiseSVN 客户 端的 具体 方法 如 下 。 
打开 VisualSVN Server, WE 7-26 所 示 。 选 中 左 侧 的 Repositores 选项 ， 单 击 鼠 标 右键 ， 


在 弹出 的 菜单 中 选择 “新 建 »Repository" 命令 ， 


Yaa fen = 
xw mma Emu 














如 图 7-27 所 示 。 


























* Besian EE ZAA MEA EEV) WAH 
ez SI 
[ID 
* z Revisions 
G Users Create New Repository- 
£3 Grouj Import Existing Repository... 此 视图 中 没有 | 
Browse 
sat) R r| ^ Repository. 
所 有 任务 (9 á 
zav) , 
BN 
SARN.. 
MH) 
I 
7-26 7-27 
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弹出 Repository Type 对 话 框 ， 勾 选 其 中 的 选项 ， 如 图 7-28 所 示 。 单 击 “下 一 步 ” 按钮 ， 在 
弹出 的 对 话 框 中 对 新 建 的 Repository 命名 ， :图 7-29 所 示 。 






































men x] 
: Bersi tory Tene 
ü | | u| 
E E 
(8 Reguiar FSFS repository myRepostory 
De = —] 
CETCIRUSS 
Create a distributed Subversion repository based an the VisualS VN Distributed Fie 
oput ee a rbi eie 
to bereplicated between geographically distributed sites. 
Learn more about avalabie repostory types. 
上 上 -多 四 
7-28 图 7-29 


继续 单 击 “下 一 步 ” 按钮 , 弹出 Repository Structure 对 话 框 , 选择 其 中 的 选项 , 如 图 7-30 所 示 。 
继续 单 击 “下 一 步 " 按钮 , 弹出 Repository Access Permissions 对 话 框 , 选择 其 中 的 选项 , 如 图 7-31 
所 示 。 











Reposi z Reposi EW) 
rate New Repository TT mnes = 
eposi . p Repository hecu " n 
ana tapis t T | EE ua ona ponimia €—— g 
| I| | I 
Select the preferred initial repository structure. Set the kind of permissions you want for the new repository. 
© Empty repository (recommended optior) ) Nobody has access 
// Single-project reoositary (with the top-evel 'rrunk', branches’ and ‘ags folders) ® All Subverson users have Read / Write access 
eh CREER E Customize permissions 
Structure context meru "eate repostory. 


Repository access permissione can be adjusted later using the Properies or Manage Securty 
context menu commards for the created repository. 





Leam more about access centro and permissions 























Fd 7-30 图 7-31 


单 击 Create 按钮 ， 完 成 版 本 库 的 创建 ， 如 图 7-32 所 示 。 返 回 VisualSVN Server 对 话 框 ， 即 
可 查看 版 本 库 ， 创建 版 本 库 中 会 默认 建立 ns branches m tags 3 个 文件 夹 ， 如 图 7-33 所 示 。 





Ej 
Ei Juneau 





Confgureé repository permssions: 
-Everyone Read / Write) 












































7-32 7-33 
将 项 目 导入 版 本 库 中 ， 找 到 安装 的 项 目 文件 夹 ， 选 中 文件 夹 ， 单 击 鼠 标 右 键 ， 在 弹出 的 菜单 中 选 
择 “TortoiseSVN> 导入 ”命令 ， 如 图 7-34 所 示 。 弹 出 “导入 ”对 话 框 ， 如 图 7-35 所 示 。 
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D Program F 
aon] 5 Amean 
d avpownll 回 HesERE 
司 动 备 从 到 百度 云 
还 而 前 的 版 本 (V) 
所 全 到 库 中 四 
d Resource S 元 ioalEE 广 作 A- 
È samples E S ny 
图 7-34 





如 果 用 户 不 知道 项 目 文件 夹 在 哪里 ， 可 以 查看 图 7-21 中 的 安装 位 置 。 


返回 VisualSVN Server 对 话 框 ， 如 图 7-36 所 示 。 在 版 本 库 上 单 击 鼠 标 右键 ， 在 弹出 菜单 中 选 
择 Copy URL to Clipboard 命令 ， 如 图 7-37 所 示 。 
ac TREE 


EEC 
* 
















@ visualsvN Server (Local) 


4 ($$ Repositories 


"3 T — 
i 

















图 7-36 7-37 
弹出 “提示 ”对 话 框 , 如 图 7-38 所 示 。 88: Create User 按钮 , 弹出 Create New User 对 话 框 ， 
在 该 对 话 框 中 设置 名 称 和 密码 ， 如 图 7-39 所 示 。 








VisualSVN Server x Create New User 
À You have no user account configured for VisualSVN Server. To access repositories eum imens 
ATA via web-browser or any Subversion client you will have to provide a username and fae 
password. 


Confrmpassword: eee 


Would you like to create a user account now? Yeu 


Ca ems] 





























图 7-38 图 7-39 


再 次 选中 项 目 文件 夹 , 单 击 鼠 标 右键 , 在 弹出 的 菜单 中 选择 “TortoiseSVN> 导入 "命令 , 弹出 “ 导 
入 ”对 话 框 ，“ 版 本 库 URL” 直 接 自动 出 现在 对 话 框 中 ， 如 图 7-40 所 示 。 在 “导入 信息 ”文本 框 
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https: //PC-201506 14EWNW svn/myRepositors/. 





https://PC-201506 14EWNW/svn/myRepository/. 





SAREM | 导入 信息 M) 
BRER 


Tyer Tm 
































图 7-41 
单 击 “ 确 定 ”按钮 , 弹出 “认证 ”对 话 框 , 在 该 对 话 框 中 输入 前 面 创建 的 新 用 户 和 密码 , 如 图 7-42 
所 示 。 单 击 “确定 ”按钮 ， 所 选中 的 项 目 将 导入 到 版 本 库 中 ， 如 图 7-43 所 示 。 


9^ DARepositories - 导入 - TortoiseSVN em xu 




















Caol wa | 








7-42 E 7-43 
将 项 目 导入 到 版 本 库 以 后 ， 不 能 随便 让 任何 人 读 写 版 本 库 ， 需 要 建立 用 户 组 和 用 户 。 返 回 VisualSVN 
Server 对 话 框 ， 选 择 Users 选项 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “新 建 >User” 命 令 ， 如 
7-44 所 示 。 弹 出 Create New User 对 话 框 ， 需 要 再 次 创建 用 户 ， 如 图 7-45 所 示 。 








Q9 VisualSVN Server (Local) 

































































4 ($i Repositories 
» "gi myRepository > 
Gu fi xdesign 
G3 Gr Create User... 
| 新建 (N) , User... 
sev) » Confirm password: *** 
REC) o User name and password are case sensitive. 
导出 列表 (D… 
So) Ce) 
7-44 7-45 


使 用 相同 的 方法 继续 创建 6 个 用 户 ， 如 图 7-46 所 示 。 选 择 Groups 选项 ， 单 击 鼠标 右键 ， 在 
弹出 的 菜单 中 选择 “新 建 >Group” 命 令 ， 如 图 7-47 所 示 。 
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IB visuslsvN Sever (oca) ERES 
4 ($8 Repositories N 
[© visuasvn sever aoc ETTHENENENI gapen Es 
adi P ien Name © Users 
b Repositoi - 
PA B xdesign a 
回 Users design1 
pm £x ign sa) mmm N 
fi xdseign2 
feu E 
feo BN 
fi Manger SEM 
ER) 
7-46 图 7-47 


6 个 用 户 分 别 代表 3 个 开发 人 员 、2 个 测试 人 员 和 1 个 项 目 经 理 。 


在 弹出 对 话 框 的 Group name 文本 框 中 输入 Developers， 单 击 Add 按钮 ， 在 弹出 的 对 话 框 中 选 
择 3 个 xdesign， 加 入 到 这 个 组 ， 单 击 OK 按钮 ， 如 图 7-48 所 示 。 使 用 相同 的 方法 创建 其 他 组 ， 如 
7-49 所 示 。 

























































































Create New Group m 
Group name: Developers. 
Members: 
B xdesign 
IK VisualSVN Server (Local) 
4 ($$ Repositories "m 
» "à myRepository n emm 
m | ffi Managers 
E OE RTesters 
[ex Cancel 
17-48 图 7-49 


{E VisualSVN Server 对 话 框 中 选择 myRepository 选项 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选 
择 Properties 命令 ， 在 弹出 的 对 话 框 中 选择 Security 选项 卡 ， 如 图 7-50 所 示 。 在 对 话 框 中 单 击 
Add 按钮 ， 在 弹出 的 对 话 框 中 选择 Developers. Managers 和 Testers 3 个 组 ， 如 图 7-51 所 示 。 





































































































Security [Nooks | Delegation | Detail 
Croup ar user name x 
Choose User or G 
mm PEREN roup ~ 一 
Evenne Read /Write - 
Special m 
Everyone 
Groups 
E — 一 一 
Permssore 
Ihen: fon parent Users 
Ono Aces Manger 
© Reed Oriy Testi 
@ nasd [Ute Test2 
xdesian id 
tear nore about access entol ard. 
E Createuser... | ok |][ cancel 
[soo ] 
7-50 图 7-51 
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单 击 OK 按钮 进行 添加 ， 如 图 7-52 所 示 。 为 Developers 和 Managers 权限 设置 Read/ 
Write, Testers 权限 设置 为 Read Only, WE 7-53 所 示 。 































































































TT E | 
Security [Hooks _|Deleentien [ Details] | Secwity [inoks | Delegation [3etails 
Group or user rame: Group or use nane: 
= I | f == 
[e Read / Write | [fines Read / Write. 
Givern Read [ Write Everyore No Access 
HEU Read [ Write managers Resd / Write 
Testers Read | Write 
p EE 
Permissions Perninions 
ertet eres 
toreen ees 
(^ Read Only. & Read Only. 
© Read / Write Read / Write 
Learn more about access ccntrd and permissions d. 























图 7-52 图 7-53 
完成 以 上 步骤 的 操作 后 ， 服 务 端 设置 就 完成 了 。 接 下 来 用 客户 端 去 检 出 代码 。 在 桌面 空白 处 单 击 
鼠标 右键 ， 在 弹出 的 菜单 中 选择 “SVN 检 出 ”命令 ， 在 弹出 的 对 话 框 中 填写 版 本 库 URL ( 具体 获取 
方式 ， 上 面 在 上 传 项 目 到 版 本 库 的 时 候 讲 过 ) ， 选 择 检 出 目录 ， 如 图 7-54 所 示 。 单 击 “ 确 定 ”按钮 ， 
弹出 “认证 ”对 话 框 ， 在 对 话 框 中 输入 用 户 名 和 密码 ， 如 图 7-55 所 示 。 
E [7] 3 = E 
[| 版 本 库 
版 本 库 URL: 


48 https://Pc-20150614EWNWlsvn/myRepository) = 区 ETT pa- an) 
检 出 至 目录 六 ); 








dime 
EN 








ERAB 


版 本 


T 
DimyRepostory «https:/[pc-201506 14ewnw:443» VisualSVN Server 

Sd Hae FO 

9 Bison 




















用 户 可 以 在 “输出 ”对 话 框 中 调整 输出 至 目录 的 位 置 。 


单 击 “确定 ”按钮 ， 开 始 检 出 项 目 ， 如 图 7—56 所 示 。 检 出 完成 之 后 ， 打 开工 作 副 本 文件 夹 ( 工 
作 项 目 文件 夹 ) ， 会 看 到 所 有 文件 和 文件 夹 都 有 一 个 绿色 的 对 勾 标 志 ， 如 图 7-57 所 示 。 


用 户 如 果 不 知道 工作 副本 文件 夹 ， 可 以 查看 图 7-21 中 所 示 的 位 置 。 
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7.1.4 ”使 用 TortoiseSVN 客户 端 


本 节 向 用 户 介绍 TortoiseSVN 客户 端的 使 用 方法 ， 例 如 修改 文件 、 添 加 文件 和 删除 文件 等 
操作 。 





实例 9 共享 位 置 中 新 建文 件 


章 \ 在 搭建 的 共享 位 置 中 新 建文 件 mp4 EX: 无 





制作 步骤 : 


打开 工作 项 目 文件 夹 ( 绿色 对 勾 文件 夹 ) ， 在 该 文件 中 添加 一 个 Readme 文件 夹 ， 创 建 的 
Readme 文件 夹 没有 受到 版 本 控制 的 状态 ， 如 图 7-58 所 示 。 选 中 Readme XR, HERTA, 
在 弹出 的 菜单 中 选择 “TortoiseSVN> 增加 ”命令 ， 如 图 7-59 所 示 。 
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ğ branches 2015/12/81519 — 文件 夫 

© myRepository 2015/12/8 15:19 — 文件 夫 

ği tags 2015/12/8 15:19 — 文件 夫 

È trunk. 2015/12/8 15:19 — xx 

ža VisualSVN-GlobalWinAuthz 2015/12/8 15:19 。 配置 设 

2015/12/81521 — XR 
7-58 图 7-59 


弹出 如 图 7-60 所 示 的 对 话 框 , 单 击 “ 确 定 ” 按 钮 ， 弹 出 “加 入 完成 ”对 话 框 , 如 图 7-61 
所 示 。 



































4 DAmyRepositonA111 -加 入 - TortoiseSVN co (S Z | 
路 径 扩展 | 
I9 jo 111 
-r - Eer] 
« 下 
国 全 选 /全 不 选 他 
国 启用 自动 属性 思 ) 
II ma [ và ] 
图 7-60 7-61 


返回 工作 项 目 文件 夹 ( 绿色 对 勾 文件 夹 ) 中 ， 选 择 新 建 的 Readme 文件 夹 ， 单 击 鼠标 右键 ， 
在 弹出 的 菜单 中 选择 “SVN 提交 ”命令 ， 如 图 7-62 所 示 。 
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M Tortoises » 
m 
图 7-62 


弹出 “认证 ”对 话 框 ， 输 入 用 户 名 和 密码 ， 如 图 7-63 所 示 。 单 击 “ 确 定 ” 按 钮 ， 完 成 提交 ， 
如 图 7-64 所 示 。 











单 击 “ 确 定 ”按钮 ， 新 添加 的 Readme 文件 夹 如 图 7-65 所 示 。 
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实例 在 找寻 的 
源 文 件 : 无 











制作 步骤 : 


01-4 打开 工作 项 目 文件 夹 ( 绿色 对 义 文件 来) ， 在 该 文件 中 创建 一 个 名 称 为 come.txt 的 文件 ， 
将 该 文件 增加 到 版 本 控制 状态 , 如 图 7-66 所 示 。 打开 come.txt 文 件 , 在 文本 中 添加 内 容 , 如 图 7-67 
所 示 。 
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图 7-66 图 7-67 
将 文件 保存 并 关闭 ， 用 户 会 发 现 come.txt 文件 的 图 标 有 变化 ， 显 示 如 图 7-68 所 示 。 红 色 
的 叹 号 代表 这 个 文件 被 修改 了 ， 需 要 提交 更 改 ， 其 他 人 才能 看 到 用 户 的 更 改 。 

重 命名 文件 。 继 续 选择 come.txt 文件 ， 将 该 文件 的 名 称 更 改 为 come1.txt， 用 户 会 发 现 
come.txt 文件 的 图 标 改变 了 ， 如 图 7-69 所 示 。 
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图 7-68 图 7-69 


重 命名 文件 与 添加 新 文件 的 操作 一 样 ， 需 要 将 新 的 文件 添加 到 版 本 库 中 ， 受 版 本 库 
控制 。 


选中 come.txt 文 件 , 单 击 鼠 标 右键 ,在 弹出 的 菜单 中 选择 “TortoiseSVN> 加 入 "命令 ,如 图 7-70 
所 示 。 将 文件 提交 后 , 单 击 鼠 标 右 键 , 在 弹出 的 菜单 中 选择 “刷新 ”命令 , 将 文件 夹 刷新 , 效果 如 图 7-71 
所 示 。 
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图 7-71 


删除 文件 。 选 择 需要 删除 的 文件 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “TortoiseSVN> 删 
除 ” 命 令 , 如 图 7-72 所 示 。 将 文件 删除 后 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “SVN 提交 ”命令 ， 
弹出 “提示 ”对 话 框 ， 用 户 可 以 根据 提示 选择 删除 ， 如 图 7-73 所 示 。 

单 击 “ 确 定 ”按钮 后 ， 弹 出 “认证 ”对 话 框 ， 输 入 用 户 名 和 密码 ， 如 图 7-74 所 示 。 单 击 “ 确 
认 ” 按 钮 ， 弹 出 “提交 完成 ”对 话 框 ， 如 图 7-75 所 示 ， 即 可 将 想 要 删除 的 文件 删除 。 
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图 7-75 


Axure RP 默认 的 保存 格式 是 Axure RP 标准 文件 格式 ， 这 种 格式 在 同一 
时 间 只 能 有 一 个 人 进行 访问 和 编辑 ， 而 Axure RP 团队 项 目 是 为 了 支持 团队 合 
作 可 以 多 人 进行 访问 , 团队 项 目 文件 格式 为 RPPRJ 格式 , 文件 图 标 如 图 7-76 图 7_76 
所 示 。 


要 创建 一 个 团队 项 目 文件 (RPPRJG 文件 ) ， 可 以 基于 已 有 的 RP 文件 ， 也 可 以 是 从 头 开始 创 
建 一 个 RPPRJG 共享 项 目 。 

1. 基于 已 有 的 RP 文件 

选择 “团队 > 从 当前 文件 创建 团队 项 目 ” 命 令 ， 根 据 向 导 完 成 创建 。 

2. 从 头 开始 创建 

在 创建 一 个 团队 项 目 之 前 ， 用 户 必须 先 要 有 SVN 服务 器 或 云 盘 ， 如 图 7-77 所 示 。 

Axure RP 团队 文件 会 放 在 SVN 服务 器 上 或 者 共享 目录 上 。 在 Axure 团队 项 目 中 ， 多 个 UX 设 
计 师 可 以 同时 访问 远程 服务 器 端的 Axure 共享 项 目 文件 ， 共 同 进行 原型 设计 和 注释 。 此 时 ， 为 不 同 
人 员 分 配 和 协调 好 工作 非常 重要 ， 尤 其 对 大 型 企业 项 目 而 言 。 
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图 7-77 


7.2.2 ”团队 合作 项 目的 环境 


Axure RP 团队 文件 一 般 会 放 在 SVN BR 四 
务 器 上 或 者 共享 目录 上 。 团 队 成 员 可 以 使 用 安 | 
装 了 Axure RP 8.0 的 电脑 来 访问 它 ， 每 个 团 | 
队 成 员 都 可 以 签 出 项 目 文档 中 的 以 下 内 容 : BD z 
页 面 、 母 版 、 说 明 字段 、 全 局 变量 、 页 面 风格 。 
样式 、 元 件 样式 、 生 成 器 。 i o m 

在 团队 项 目 中 编辑 文件 ， 团 队 成 员 要 签 出 e 
所 有 需要 的 内 容 元 素 。 如 果 其 他 团队 成 员 也 想 | 
要 签 出 同一 部 分 ， 系 统 会 自动 提示 成 员 该 部 分 9 
已 经 被 签 出 。 当 签 出 部 分 完成 设计 后 ， 团 队 成 IE 
员 可 以 签 入 内 容 元 素 ， 同 时 其 他 的 团队 成 员 也 
可 以 对 想 要 签 出 的 内 容 元 素 进行 编辑 设计 ， 如 
7-78 所 示 。 


7.2.3 签 出 及 签 入 状态 


FAA: 在 签 入 状态 下 ， 元 素 可 以 被 团队 合作 中 的 任何 人 签 出 ， 但 是 这 种 状态 只 标注 副本 原件 的 
状态 ， 当 签 出 时 Axure RP 才 会 知道 是 否 可 以 签 出 。 

SEA: 这 种 状态 的 元 素 表示 已 经 被 团队 成 员 签 出 ， 在 团队 合作 中 的 其 他 成 员 的 本 地 ， 该 内 容 元 
素 副 本 仍然 显示 为 签 入 状态 。 

HED: 当 团队 成 员 在 本 地 Axure RP 项 目 中 新 建 一 个 元 素 时 , 会 显示 此 状态 , 一 旦 签 入 元 素 ， 
队 合 作 中 的 其 他 成 员 就 可 以 看 到 或 使 用 该 元 素 。 

冲突 : 本 地 Axure RP 项 目 中 的 元 素 与 服务 器 上 的 文件 中 的 相同 元 素 发 生 冲 突 。 

不 安全 签 出 : 签 出 一 个 已 被 团队 其 他 成 员 签 出 的 元 素 ( 签 出 时 被 警告 提示 ， 但 还 是 选择 签 出 ) ， 
队 中 的 其 他 成 员 签 入 这 个 元 素 时 ， 可 能 会 丢失 某 些 修改 。 
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本 节 将 向 用 户 讲解 如 何 创建 团队 项 目 ， 任 何 Axure RP 文件 都 是 可 以 转换 成 团队 项 目 文件 。 


7.3.1 创建 团队 项 目 


执行 “文件 > 新建” 命令， 新建 一 个 项 目 文件 ， 如 图 7-79 所 示 。 执 行 “ 团 队 > 从 当前 文件 创 
建 团队 项 目 ” 命 令 ， 如 图 7-80 所 示 。 
DT - 









从 当前 文件 创建 团队 项 目 .<C> 
获取 并 打开 国 队 项 目 <G> 




















7-79 图 7-80 


在 弹出 的 “创建 团队 项 目 ”对 话 框 中 创建 项 目 ， 如 图 7-81 所 示 。 
用 户 也 可 以 执行 “文件 > 新 建 团队 项 目 ” 命 令 ， 如 图 7-82 所 示 。 在 弹出 的 “创建 团队 项 目 ” 对 
话 框 中 创建 项 目 ， 如 图 7-83 所 示 。 
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图 7-81 图 7-82 图 7-83 


不 管用 户 使 用 其 中 的 任何 方法 , 都 可 以 创建 团队 项 目 。 接 下 来 继续 创建 团队 项 目 ， 单 击 “ 创 建 团 
队 项 目 ” 对 话 框 中 的 SVN 按钮 ， 如 图 7-84 所 示 。 
单 击 团队 目录 后 的 上 按钮 , 选择 工作 项 目 文件 夹 位 置 ( 绿色 对 勾 标识 的 文件 夹 ) 如 图 7-85 所 示 。 
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图 7-84 


在 “团队 项 目 名 称 ” 文 本 框 中 输入 项 目的 名 称 ， 如 图 7-86 所 示 。 在 Local Diretory 选项 下 单 


创建 团队 项 目 。 





击 夺 | 按钮， 选择 本 地 项 目 保存 的 位 置 ， 如 图 7-87 所 示 。 
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要 避免 空格 。 
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图 7-85 








在 选择 团队 目录 位 置 时 ， 可 以 直接 复制 粘贴 URL È SVN 的 地 址 ， 用 户 可 以 看 图 
7-40， 也 可 以 在 工作 项 目 文件 夹 ( 绿色 对 勾 文件 夹 ) 中 直接 新 建文 件 ， 将 文件 添加 
到 版 本 控制 中 ( 前 面 讲解 的 添加 文件 操作 ) ， 在 选择 团队 目录 时 直接 选择 该 文件 位 置 ， 
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EUER: DyvRepostory 
m 

图 7-87 


在 给 团队 项 目 命名 时 ， 要 保持 简短 的 项 目 名 称 ， 在 名 称 中 如 果 包 含 多 个 独立 的 单词 ， 
要 使 用 连 字符 或 者 首 字母 大 写 ， 不 要 出 现 空格 ， 因 为 项 目 名 称 会 在 URL 使 用 ， 所 以 


单 击 “ 创 建 ”按钮 ， 弹 出 创建 进度 窗口 ， 如 图 7-88 所 示 。 当 创建 成 功 后 ， 弹 出 提示 对 话 框 ， 如 


7-89 所 示 。 
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图 7-88 图 7-89 
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Local Diretory 选项 是 本 地 项 目 保存 的 位 置 ， 三 二 
打开 该 位 置 ， 会 看 到 Axure 团队 项 目 创建 了 — 7-00 ——— ene 
两 个 内 容 ， 如 图 7-90 所 示 。 用 户 不 要 编辑 有 m 


DO NOT EDIT 文件 ， 后 面 将 详细 讲解 。 7-90 


7.3.2 ”将 文件 添加 到 版 本 控制 的 状态 


打开 工作 项 目 文件 夹 ( 绿色 对 勾 文件 来) ， 用 户 会 看 到 创建 的 团队 项 目 ， 但 是 并 没有 显示 “ 受 控 
状态 ”， 如 图 7-91 所 示 。 选 择 该 项 目 ， 将 文件 添加 到 版 本 控制 的 状态 。 方 法 与 前 面 讲解 的 添加 文件 
的 方法 相同 ， 这 里 不 再 详细 讲解 ， 如 图 7-92 所 示 。 
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图 7-91 图 7-92 
用 户 如 果 想 在 项 目 文件 夹 ( 绿色 对 勾 文件 夹 ) 中 新 建文 件 ， 并 将 文件 添加 到 版 本 控制 
状态 , 可 以 在 选择 团队 目录 时 选择 新 建文 件 , 不 用 再 添加 文件 , 只 需要 执行 更 新 命令 即 可。 


7.3.3 完成 团队 项 目 后 的 准备 工作 


°. 完成 团队 项 目的 创建 后 ， 需 要 将 共享 目录 的 地 址 告诉 团队 合作 中 的 其 他 成 员 。 
* ”同时 把 SVN 服务 器 的 用 户 名 和 密码 准备 好 ， 团 队 合作 中 的 其 他 成 员 在 第 一 次 连接 下 载 时 
需要 使 用 。 


7.3.4 DO_NOT_EDIT 


在 DO_NOT_EDIT 文件 夹 下 有 两 个 文件 夹 ， 分 别 是 LocalStore 和 SVN, WE 7-93 所 示 。 
LocalStore. 包含 一 系列 被 Axure 团队 项 目 中 用 到 的 文件 。 
SVN: 包含 所 有 用 来 与 SVN 服务 器 连接 的 项 目 文件 ， 随 着 项 目的 进行 这 些 文件 所 占 的 空间 将 越 
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MY » DO NOT EDIT » 


























dex 大 = 
名 称 修改 日 期 mm 
Ji LocalStore 2015/12/8 16:34 X 
ej SIN 2015/12/81634 Si% 
图 7-93 
用 户 切 忌 不 能 手动 编辑 这 些 文件 ， 如 果 更 改 这 些 文件 ， 就 会 导致 团队 合作 项 目 文件 
被 破坏 。 
7.4 
执行 “文件 > 打开 团队 项 目 ”命令 ， 或 者 执行 “团队 > 获取 并 打开 团队 项 目 ”命令 ， 如 图 7-94 
所 示 。 弹 出 “获取 团队 项 目 ” 对 话 框 ， 如 图 7-95 所 示 。 
LES —WO— Wo 858a 
Team Project Location. -一 - = 
AxShare ID: ES] 
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图 7-95 


图 7-94 
“获取 团队 项 目 ” 对 话 框 如 图 7-96 所 示 。 单 击 团队 目录 后 的 于 可 按钮， 选择 


选择 SVN 选项 ， 
项 目 检 出 的 文件 夹 位 置 ( 绿色 对 勾 标识 的 文件 夹 ) ， 如 图 7-97 所 示 。 
d pens mE 
- ER x [7 
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用 户 可 以 复制 粘贴 URL sk SVN 的 地 址 ， 读 者 可 以 看 图 7-40. 
想 要 打开 团队 项 目 必须 要 将 项 目 文件 处 于 版 本 控制 的 状态 ， 否 则 显示 团队 目录 错误 。 
如 果 团 队 目 录 或 者 项 目 文件 名 称 中 包含 特殊 字符 ， 将 无 法 正常 打开 文件 。 


用 户 在 选择 文件 时 会 看 到 在 MY 团队 项 目 文件 夹 中 有 db, dav 及 conf 子 目录 ， 说 
明 在 此 人 台 计 算 机 上 已 经 获取 过 该 团队 项 目 文件 ， 不 需要 重复 获取 ， 直 接 执行 “文件 > 
打开 ”命令 ， 即 可 打开 项 目 文件 。 


在 Local Diretory ( 本 地 目录 ) 选项 中 ， 默 认 的 位 置 为 C:\ 
Users\Administrator\Documents\Axure\Team Projects, 
用 户 可 以 更 改 项 目下 载 后 存放 的 位 置 。 单 击 Get 按钮 ，Axure 
RP 会 从 服务 器 或 者 网 络 目录 中 下 载 项 目 文件 ， 项 目 成 功 获取 后 
会 弹出 如 图 7-98 所 示 的 对 话 框 。 将 项 目 成 功 获取 后 ， 可 以 进 
行 编辑 。 


图 7-98 





成 功 z 


o 国 队 项 目 “ASD” 已 成 功 获取 








7.5 


不 管 是 创建 的 团队 项 目 还 是 获取 的 团队 项 目 ，Axure RP 的 工作 界面 如 图 7-99 所 示 。 选 择 其 中 
的 页 面 进行 编辑 ， 将 元 件 拖 遇 到 页 面 编辑 区 中 ， 用 户 会 发 现 页 面 是 不 能 被 编辑 的 ， 在 页 面 的 右上 角 会 





图 7-99 7-100 


也 就 是 说 团队 项 目 文件 只 能 将 页 面 签 出 后 才能 对 页 面 进行 编辑 , 单 击 提示 框 , 如 图 7-101 所 示 。 
弹出 进度 框 ， 如 图 7-102 所 示 。 
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ASD - Axurc RP Pro 80 
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图 7-101 图 7-102 
完成 签 出 后 ， 页 面 管理 面板 中 的 页 面 如 图 7-103 所 示 。 用 户 也 可 以 在 要 编辑 的 页 面 上 单 击 鼠 标 
右键 ， 在 弹出 的 菜单 中 选择 “ 签 出 ”命令 ， 将 页 面 签 出 ， 如 图 7-104 所 示 。 
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当 页 面 图 标 变 成 绿色 的 圆圈 图 标 时 ， 就 可 以 对 该 页 面 内 容 进行 编辑 了 ， 如 图 7-105 所 示 。 完 成 
团队 项 目 文件 的 编辑 后 ， 需 要 用 户 将 编辑 的 内 容 再 签 入 ， 选 择 签 入 的 页 面 ， 单 击 鼠 标 右键 ， 在 弹出 的 
菜单 中 选择 “ 签 入 ”命令 ， 将 页 面 签 入 ， 如 图 7-106 所 示 。 

选择 “ 签 入 ”命令 后 ， 弹 出 “ 签 入 ”对 话 框 ， 可 以 在 “ 签 入 说 明 ” 文 本 框 中 输入 说 明 ， 以 备查 看 ， 
如 图 7-107 所 示 。 单 击 “ 确 定 ” 按 钮 ， 将 页 面 签 入 ， 如 图 7-108 所 示 。 
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如 果 团 队 项 目 中 的 成 员 同时 签 出 项 目 中 的 元 素 ， 就 会 被 提示 为 不 安全 签 出 ， 会 导致 项 目 元 素 的 
丢失 。 


当 团队 项 目 被 团队 成 员 获取 并 进行 编辑 后 ， 需 要 将 项 目 文件 再 次 上 传 到 服务 器 中 ， 
以 便 其 他 成 员 对 更 改 后 的 项 目 文件 进行 获取 和 使 用 。 


7.6 





在 创建 或 者 获取 团队 项 目 时 ， 常 常会 用 到 “团队 ”菜单 命令 ， 如 图 7-109 所 示 。 
从 当前 文件 创建 项 目 : 如 果 想 在 当前 打开 的 项 目 文件 中 创建 团队 项 目 ， 可 以 使 用 该 选项 。 只 有 当 
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前 RP 文件 打开 时 此 选项 才 可 用 。 

获取 并 打开 团队 项 目 : 使 用 该 选项 可 以 基于 一 个 已 有 团队 项 目 创建 本 地 项 目 副本 。 

从 团队 目录 获取 全 部 变更 : 由 于 实际 工作 中 可 能 每 天 都 要 重复 更 新 多 次 ， 所 以 在 开始 团队 项 目 工 
作 之 前 ， 首 先 需要 获取 更 新 的 习惯 。 

提交 所 有 变更 到 团队 目录 : 类 似 保存 工作 ， 可 以 将 所 有 的 修改 存 到 本 地 项 目 中 。 




















改 到 共享 项 目 位 置 后 ， 无 法 撤销 签 出 操作 对 修改 进行 撤销 。 


签 出 全 部 : 签 出 整个 项 目的 全 部 元 素 ， 这 是 一 种 不 明智 的 操作 ，Axure RP 会 弹出 警告 对 话 框 ， 
如 图 7-110 所 示 。 


.<T> | 帮助 <H> 


要 注意 的 是 选择 该 选项 后 ， 正 在 编辑 的 文件 仍然 处 于 签 出 状态 。 但 是 ， 发 送 所 有 修 





获取 并 打开 团队 项 目 <G> 


从 回 队 目录 获取 全 部 变更 <F> 
铬 ”提交 所 有 变更 到 团队 目录 <T> 
签 出 全 部 <O> 
Dg 答 和 全 部 <l> 
撤销 所 有 签 册 <U> | 


O ”提交 pagel 更 新 到 团队 目录 


n ZA pagel 
Hi ESipagel 





管理 团队 项 目 .<M> 
全 ”浏览 团队 项 目 历史 记录 ,<B> 
重新 指向 移动 位 置 的 团队 目录 ..<R> 





清除 本 地 副本 





图 7-109 图 7-110 


如 果 需 要 签 出 所 有 元 素 ， 需 要 尽快 将 元 素 签 入 ， 以 免 其 他 成 员 能 够 安全 签 出 。 


签 入 全 部 : 将 签 出 的 元 素 全 部 签 入 。 

撤销 所 有 签 出 : 撤销 不 想 要 的 项 目 工 作 ， 将 受 影响 的 内 容 恢 复 到 签 出 前 的 状态 。 

从 团队 项 目 中 获取 page1 的 更 新 : 从 共享 目录 中 获取 修改 ， 适 用 于 所 选 定 的 一 个 页 面 或 母 版 。 

提交 page! 更 新 到 团队 目录 : 发 送 修改 到 共享 目录 中 ， 适 用 于 所 选 定 的 一 个 页 面 或 母 版 。 

签 出 pagel: 适用 于 所 选 定 的 一 个 页 面 或 母 版 。 

签 入 page1: 适用 于 所 选 定 的 一 个 页 面 或 母 版 。 

撤销 签 出 page1: 适用 于 所 选 定 的 一 个 页 面 或 母 版 。 

管理 团队 项 目 : 在 团队 项 目 环境 中 ,团队 中 的 每 个 成 员 在 自己 的 本 地 计算 机 上 都 有 一 个 项 目 副本 ， 
在 一 天 的 工作 中 每 个 人 都 会 创建 一 些 新 的 内 容 ， 对 项 目 进 行 修改 。 选 择 此 命令 可 以 查看 团队 项 目的 状 
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态 ， 如 图 7-111 所 示 。 


国 队 共享 目录 : Di\imyRepositorYASD\ 


|| 点 志 下 方 按钮 更 新 闻 队 项 目 中 约 页 面 、 母 版 和 文档 属性 约 状态 。 右 链 单 主 条目 可 以 答 入 、 签 出 ,并且 获取 更 
新 。 点 击 标题 可 以 排序 浏览 。 


名 称 

page1 

index 

page2 

page3 
Property CSV Report 1 
Property Print1 
Property Word Doc 1 
Property HTML 1 
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浏览 团队 项 目 历史 记录 : 降低 丢失 工作 的 风险 ， 只 要 共享 项 目 所 在 的 SVN 服务 器 或 者 网 络 共享 
目录 是 可 靠 的 ， 就 可 以 恢复 到 成 员 在 修改 项 目 之 前 的 任何 版 本 。 

重新 指向 移动 位 置 的 团队 目录 : 有 时 会 移动 共享 目录 在 网 络 磁盘 中 的 位 置 ， 只 要 共享 位 置 被 完全 
移动 ， 这 样 的 操作 对 于 团队 项 目 是 安全 的 。 

清除 本 地 副本 : 在 Axure RP 中 极 少 出 现 未 知 错误 ， 如 果 出 现 的 话 会 弹出 错误 消息 ， 此 时 可 以 尝 
试 对 问题 进行 修复 ， 清 除 SVN 特定 文件 或 者 获取 所 修改 的 文件 。 


Axure Share 就 是 第 2 章 向 用 户 介绍 的 Ax Share, 它 用 于 存放 HTML 原型 的 Axure 云 主机 服务 。 
Axure Share 目前 托管 在 Amazon 网 络 服务 平台 ， 是 一 个 相当 可 靠 和 安全 的 云 环境 。 用 户 可 以 
登录 https://share.axure.com/ 查看 。 


7.7.1 创建 Axure Share 账号 


使 用 Axure RP 需要 创建 一 个 账号 ， 从 2014 年 5 月 开始 ，Axure Share 就 全 部 免费 。 每 个 账 
号 可 以 创建 100 个 项 目 ， 每 个 项 目的 大 小 限制 为 100MB。 用 户 可 以 执行 “发 布 > 登录 Axure 账号 ” 
命令 , 弹出 “登录 ” 对 话 框 , 如 图 7-112 所 示 。 在 “登录 ”对 话 框 中 单 击 “创建 账号 ” 按钮, 如 图 7-113 
所 示 。 

用 户 可 以 在 “创建 账号 ”对 话 框 中 创建 账号 ,也 可 以 登录 https://share.axure.com ,在 网 页 中 创建 ， 
如 图 7-114 所 示 。 
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图 7-114 


7.7.2 Axure Share 的 协作 功能 


用 户 可 以 将 原型 托管 在 Axure Share 上 并 与 利益 相关 者 分 享 。 

e ”使 用 HTML 原型 的 讨论 功能 能 让 利益 相关 者 与 设计 团队 进行 离线 讨论 。 

e ”用户 可 以 在 Axure 网 站 中 链接 Axure Share， 也 可 以 直接 访问 https://share.axure. 
com。 如 图 7-115 所 示 是 Axure Share 的 登录 页 面 ， 如 图 7-116 所 示 是 登录 后 的 状 
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7.7.3 将 原型 上 传 到 Axure Share 上 


将 原型 文件 存储 于 Axure Share 上 很 简单 ， 需 要 用 户 登 录 账 号 后 进入 登录 后 界面 ， 单 击 “ 创 建 
新 项 目 ” 按 钮 ， 如 图 7-117 所 示 。 弹 出 “创建 新 项 目 ”对 话 框 ， 如 图 7-118 所 示 。 





All Workspaces 











图 7-117 





Create a new workspace 


回 











[Create | Cancel | 











图 7-118 


在 对 话 框 中 输入 项 目 文件 夹 名 称 ， 单 击 Create 按钮 进行 创建 ， 如 图 7-119 所 示 。 选 中 新 建 的 
项 目 文件 夹 ， 可 以 对 该 项 目 文件 夹 进行 上 传 或 者 编辑 项 目 文件 等 操作 ， 如 图 7-120 所 示 。 
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图 7-119 


7.7.4 发 布 到 Axure Share 


用 户 可 以 在 网 页 中 直接 创建 项 目 文件 夹 ， 也 可 以 将 项 目 上 传 到 Axure Share 中 ， 执 行 “ 发 布 > 
发 布 到 Axure Share” 命 令 ， 弹 出 “发 布 到 Axure Share” 对 话 框 ， 如 图 7-121 所 示 。 
配置 : 用 于 HTML 输出 设置 ， 单 击 “ 编 辑 ” 按 钮 即 可 弹出 “生成 HTML” 对 话 框 ， 用 户 可 以 对 


其 进行 设置 ， 如 图 7-122 所 示 。 


图 7-120 
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创建 一 个 新 项 目 : 需要 输入 新 项 目的 名 称 、 密 码 和 文件 夹 ， 选 择 文件 夹 时 弹出 “登录 ”对 话 框 ， 
需要 用 户 登录 Axure Share KS, WE 7-123 所 示 。 如 果 用 户 已 经 登录 了 账号 ， 可 以 选择 前 面 一 节 
中 创建 的 项 目 文件 夹 ， 如 图 7-124 所 示 。 
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SANANA: 用 新 的 原型 替换 原来 的 原型 ， 但 是 需要 输入 原来 原型 的 项 目 ID 。 


本 章 主要 向 用 户 介绍 团队 项 目 合作 的 内 容 ， 首 先 讲解 团队 项 目 合作 原型 存储 的 公共 位 置 ， 其 次 讲 
解 团队 项 目的 制作 、 获 取 及 发 布 到 Axure Share 中 。 重 点 是 团队 项 目 中 的 签 入 和 签 出 ， 只 有 将 绘制 
完 的 内 容 全 部 签 入 后 ， 才 能 使 团队 合作 中 的 其 他 成 员 看 到 ， 需 要 团队 成 员 的 合作 完成 。 


通过 学 习 团 队 合作 项 目 ， 用 户 应 该 基本 掌握 团队 合作 制作 一 个 大 型 原型 产品 时 的 要 点 了 。 接 下 来 
完成 一 个 下 拉 菜 单 的 实例 ， 充 分 体会 Axure RP 的 强大 功能 。 


单 击 按钮 展开 下 拉 菜 单 


\ 单 击 按钮 展开 下 拉 菜 单 .mp4 
第 7 章 \ 单 击 按钮 展开 下 拉 菜 单 .rp 





J| htp://127.0.0.1:32768/ 





下 拉 莱 单 很 容易 被 使 用 到 网 页 中 ， 本 实例 
将 制作 由 按钮 控制 的 下 拉 荣 单 ， 当 单 击 按钮 时 ， 
弹出 下 拉 菜 单 效果 。 实 例 中 主要 使 用 了 提交 按钮 
及 树 状 菜单 ， 操 作 很 简单 ， 希 望 用 户 可 以 掌握 其 
中 的 技巧 。 
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本 章 知 识 点 
v^ 进入 百度 网 站 
v 微 信 APP 


百度 网 站 的 高 保 真 原型 ， su mend 
实现 网 站 注册 、 登 录 和 查看 新 闻 效果 。 另 外 还 制作 了 下 载 本 章 的 电子 书 
手机 微 信 APP 原型 ， 让 用 户 可 以 更 深入 地 了 解 Aure RP. 


EC US 


— 








百度 的 首页 内 容 不 多 ， 但 功能 却 非常 丰富 。 首 先 可 以 使 用 Axure RP 模拟 制作 整个 页 面 的 结构 和 
功能 ， 将 一 个 还 不 存在 的 产品 逼真 地 展示 出 来 。 经 过 多 次 讨论 调整 ， 得 到 最 满意 的 设计 方案 后 ， 再 安 
排 程序 人 员 开 始 整个 网 站 的 开发 工作 。 

本 节 通 过 实例 31 至 实例 39 的 内 容 进行 讲解 ， 包 括 登录 百度 账号 、 设 置 下 拉 菜 单 和 更 多 产品 下 
拉 菜 单 、 为 百度 主页 添加 交互 事件 、 制 作 注册 页 面 、 为 注册 页 面 添 加 交互 事件 等 ， 详 细 内 容 用 户 可 扫 
描 章 首 处 的 二 维 码 ， 把 文件 推送 到 自己 的 邮箱 中 下 载 获 取 ， 如 图 8-1 至 图 8-3 为 部 分 实例 的 效果 图 。 
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8-3 


在 手机 APP 应 用 日 益 普及 的 今天 ， 使 用 Axure RP 制作 移动 设备 中 的 产品 原型 逐渐 成 为 主流 ， 
本 节 将 制作 聊天 APP 微 信 的 产品 原型 ， 通 过 学 习 ， 用 户 会 对 Axure RP 的 功能 有 全 新 的 认识 。 

本 节 通 过 实例 40 至 实例 41 的 内 容 进行 讲解 ， 包 括 进 入 手机 微 信和 界面 、 多 种 界面 进行 切换 、 微 
信 的 4 个 状态 页 等 ， 详 细 内 容 用 户 可 扫描 章 首 处 的 二 维 码 ， 把 文件 推送 到 自己 的 邮箱 中 下 载 获取 ， 如 
8-4 至 图 8-8 为 部 分 实例 的 效果 图 。 
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本 章 主 要 是 运用 Axure RP 制作 大 型 的 产品 原型 实例 ， 通 过 实例 的 制作 ， 巩 固 Axure RP 的 基 
础 知识 ， 更 多 地 了 解 Axure RP 软件 在 制作 产品 原型 时 的 用 途 和 使 用 技巧 。 用 户 要 灵活 使 用 实例 中 所 
用 到 的 知识 ， 制 作出 更 加 丰富 的 原型 作品 。 
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移动 互联 网 之 路 一 一 AXure RP 8.0 网 站 与 APP 原型 设计 从 入 门 到 精通 





学 习 了 各 种 综合 实例 后 ， 接 下 来 用 户 要 完成 一 个 使 用 搜索 栏 搜索 后 弹出 的 提示 效果 的 页 面 ， 制 作 
时 要 综合 运用 本 书 所 需 的 各 种 知识 点 。 


使 用 搜索 栏 进行 搜索 后 弹出 的 提示 效果 


实战 ， 教学 视频 : 视频 \ 第 8 章 \ 使 用 搜索 栏 进行 搜索 后 弹出 的 提示 效果 .mp4 
源 文件 : 源 文件 \ 第 8 章 \ 使 用 搜索 栏 进行 搜索 后 弹出 的 提示 效果 .rp 





本 实例 主要 用 文本 框 及 动态 面板 ， 实 现在 网 页 的 搜索 Google 
栏 中 输入 内 容 后 弹出 搜索 提示 效果 。 本 实例 的 重点 是 要 在 
一 个 元 件 上 添加 多 个 用 例 事 件 ,并 且 需 要 将 用 例 设置 条 件 ， 
用 户 需要 细心 设置 条 件 ， 对 元 件 进行 赋值 





DNE 


将 主页 重 命名 为 home 。 在 该 页 中 拖 入 图 片 元 件 ， 继续 拖 入 图 片 元 件 及 文本 框 元 件 , 在 “属性 ” 
导入 图 片 。 标签 下 设置 文本 框 的 样式 。 


Google in Google 
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Goe BE FTIRA 


添加 动态 面板 ， 并 设置 子 状态 页 面 ， 将 动态 面板 加 ES 执行“ 发布 > 预览 ”命令 ， 查 看 效果 。 
隐藏 ， 为 其 添加 交互 事件 。 


